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

Question

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

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

然后，当您离开输入时隐藏它。

问题是我无法取出变量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>

​

Answer 2

多个var length有一些语法错误，也可以简化代码。我还会将一个自定义事件放在尾随的.characters上，而不是在输入上，然后触发它。

请注意，通过这样做，您可以包括当您单击输入上的小x以清除它时触发的"search“事件。

我添加了一个自定义事件，并向该事件传递了一个标志，以便在触发时显示/隐藏在同一个函数中。

我把div做了一个span，让它显示在右边。

​

$("input.form-control").on('focus keyup change search', function() {
  var block = $(this).closest('.input-block');
  block.find(".characters").trigger('custom', ["show"]);
}).on('focusout', function(event) {
  var block = $(this).closest('.input-block');
  var chars = block.find(".characters");
  chars.trigger('custom', ["hide"]);
});
$('.characters').on('custom', function(event, dowhat) {
  let displayMe = dowhat === "show" ? true : false;
  let charTxt = $(this);
  if (displayMe) {
    let block = $(this).closest('.input-block');
    let blockInput = block.find("input.form-control");
    let maxLength = blockInput.attr('maxlength');

    let currentLength = blockInput.val().length;
    let allowedLength = maxLength - currentLength;
    charTxt.text(allowedLength + "");
  }
  charTxt.toggle(displayMe);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
  <div class="input-block 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">
    <span class="characters"></span>
    <div class="input-content"></div>
  </div>
  <div class="input-block 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">
    <span class="characters"></span>
    <div class="input-content"></div>
  </div>
  <div class="input-block 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">
    <span class="characters"></span>
    <div class="input-content"></div>
  </div>
  <div class="input-block 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">
    <span class="characters"></span>
    <div class="input-content"></div>
  </div>
</div>

​