我有一个包含十几个输入的表单,每个都有不同的最大长度
我想在 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>
最佳答案
你想要这个:
$("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>
关于javascript - jQuery计算输入的剩余字符长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53708638/