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

Question

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

我想在div characters中（当我们单击时）在这些输入的右侧显示此授权的字符数

然后在您留下输入内容时将其隐藏

问题是我无法在keyup函数中获取变量maxLenght来发送它，所以我获得了每个键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以清除它时触发的“搜索”事件。

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

我将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>