我有一个产品页面,其中有多个文本输入和一个文本区域输入。 3 个文本输入的最大长度为 18,1 个文本输入的最大长度为 5,1 个文本区域的最大长度为 255。如何在不编写多个函数的情况下为每个元素设置字符计数器?
我已经设置了一个基本函数,可以根据 .form-input 的值更改字符计数器 html,但显然这会将其应用于所有计数器。我在将其指定给每个单独的输入和文本区域时遇到问题。
<div class="form-field text-lines" data-product-attribute="input-text">
<label class="form-label form-label--inlineSmall" for="attribute_text_347">Text Line 1:</label>
<p id="text-info">Type exactly as you want the text to appear, including upper/lower case.</p>
<input class="form-input form-input--small" type="text" id="attribute_text_347" name="attribute[347]" maxlength="18">
<span class="characters-left">Characters Left: <span class="counter">18</span></span>
</div>
$(document).ready(function() {
let text_max = 18;
$('.counter').html(text_max);
$('.text-lines .form-input').keyup(function() {
let text_length = $('.text-lines .form-input').val().length;
let text_remaining = text_max - text_length;
$('.counter').html(text_remaining);
});
});
我希望每个输入/文本区域的字符计数器在输入特定输入/文本区域时更新。
最佳答案
哪里有这个:
let text_length = $('.text-lines .form-input').val().length;
let text_remaining = text_max - text_length;
我认为你真正想要的是
let text_length = this.value.length;
let max_length = this.getAttribute("maxlength");
let text_remaining = max_length - text_length;
不要再做一个jquery来获取文本长度,并获取输入元素的最大长度属性
关于javascript - 如何为同一页面上的不同输入和文本区域设置动态字符计数器,每个输入和文本区域的最大长度不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58346879/