jQuery Calculate remaining characters length for input

Question

I have a form with a dozen input, each with a different maximum length

I would like to display this authorized number of characters to the right of these input in the div characters (when we click in)

Then hide it when you leave the input

The problem is that I can not get out the variable maxLenght to send it in the keyup function, so I get every key the maxlength

How can I proceed to avoid all this?

$("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

You have some syntax errors with multiple var length, you can also simplify the code. I would also put a custom event on the trailing .characters instead of on the input and then trigger that.

Note that by doing it this way you can include the "search" event fired when you click the little x on an input to clear it.

I added a custom event and passed to that a flag to show/hide in the same function when it is triggered.

I made the div a span to show it to the right.

$("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>

Answer 2

You want this one:

$("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>