javascript - jQuery计算输入的剩余字符长度

Question

我有一个包含十几个输入的表单，每个都有不同的最大长度

我想在 div characters 中这些输入的右侧显示授权的字符数(当我们点击时)

然后在你离开输入的时候隐藏它

问题是我无法取出变量 maxLenght 以在 keyup 函数中发送它，所以我得到每个键的 maxlength

我怎样才能避免这一切？

$("input").focus(function() {
  var block = $(this).parent()
  var maxLength = $(this).attr('maxlength');

  var length = $(this).val().length;
  var length = maxLength - length;
  block.find(".characters").show().text(length);
  // return maxLength
});

$('input').keyup(function() {
  var block = $(this).parent()
  var maxLength = $(this).attr('maxlength');

  var length = $(this).val().length;
  var length = maxLength - length;
  block.find(".characters").show().text(length);
});

$("input").focusout(function() {
  $(this).next('.characters').text('');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
  <div class="col-xs-3">
    <div class="input-title">Code 1</div>
    <input type="search" name="code_1" id="code-1" class="form-control dymax" value="000" placeholder="Code 1" autocomplete="none" maxlength="5">
    <div class="characters"></div>
    <div class="input-content"></div>
  </div>
  <div class="col-xs-3">
    <div class="input-title">Code 2</div>
    <input type="search" name="code_2" id="code-2" class="form-control dymax" value="000" placeholder="Code 2" autocomplete="none" maxlength="20">
    <div class="characters"></div>
    <div class="input-content"></div>
  </div>
  <div class="col-xs-3">
    <div class="input-title">Code 3</div>
    <input type="search" name="code_3" id="code-3" class="form-control dymax" value="000" placeholder="Code 3" autocomplete="none" maxlength="10">
    <div class="characters"></div>
    <div class="input-content"></div>
  </div>
  <div class="col-xs-3">
    <div class="input-title">Code 4</div>
    <input type="search" name="code_4" id="code-4" class="form-control dymax" value="000" placeholder="Code 4" autocomplete="none" maxlength="5">
    <div class="characters"></div>
    <div class="input-content"></div>
  </div>
</div>

Answer 1

你想要这个:

$("input").on('focus keyup', function() {
  var $input = $(this);
  var value = $input.val();
  var maxLength = parseInt($input.attr('maxlength'));
  var remainingLength = maxLength - value.length;
  if (remainingLength < 0) {
    $input.val(value.substr(0, maxLength));
    remainingLength = 0;
  }
  $input.next().show().text(remainingLength);
});

$("input").focusout(function() {
  $(this).next().text('');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="form-group row">
  <div class="col-xs-3">
    <div class="input-title">Code 1</div>
    <input type="search" name="code_1" id="code-1" class="form-control dymax" value="000" placeholder="Code 1" autocomplete="none" maxlength="5">
    <div class="characters"></div>
    <div class="input-content"></div>
  </div>
  <div class="col-xs-3">
    <div class="input-title">Code 2</div>
    <input type="search" name="code_2" id="code-2" class="form-control dymax" value="000" placeholder="Code 2" autocomplete="none" maxlength="20">
    <div class="characters"></div>
    <div class="input-content"></div>
  </div>
  <div class="col-xs-3">
    <div class="input-title">Code 3</div>
    <input type="search" name="code_3" id="code-3" class="form-control dymax" value="000" placeholder="Code 3" autocomplete="none" maxlength="10">
    <div class="characters"></div>
    <div class="input-content"></div>
  </div>
  <div class="col-xs-3">
    <div class="input-title">Code 4</div>
    <input type="search" name="code_4" id="code-4" class="form-control dymax" value="000" placeholder="Code 4" autocomplete="none" maxlength="5">
    <div class="characters"></div>
    <div class="input-content"></div>
  </div>
</div>