如何为同一页面上的不同输入和文本区域设置动态字符计数器，每个最大长度不同？答案

【问题标题】：How do I set up a dynamic character counter for different inputs and textareas on the same page with different max lengths on each one?如何为同一页面上的不同输入和文本区域设置动态字符计数器，每个最大长度不同？
【发布时间】：2019-10-11 18:44:10
【问题描述】：

我有一个包含多个文本输入和一个文本区域输入的产品页面。 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);
    });
});

我希望每个输入/文本区域的字符计数器在输入特定输入/文本区域时更新。

【问题讨论】：

在事件内部定义text_max，而不是硬编码18，检索元素的maxlength。

标签： javascript jquery input counter maxlength

【解决方案1】：

你有这个：

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来获取文本长度，获取输入元素的最大长度属性

【讨论】：

谢谢！在你的帮助下，我需要改变的就是这条线。 $(this).next('.characters-left').find('.counter').html(textRemaining);

【解决方案2】：

我使用您的代码来提高功能。这是一个例子：

$(document).ready(function() {
  const inputs = $('.form-input');
  inputs.each(function(index, element){
    inputLengthCounter($(element).attr('id'));
  });
});

function inputLengthCounter(input_id) {
  const input = document.getElementById(input_id);
  const text_max = input.maxLength;
  const counter = $(input).next('.characters-left').find('.counter');
  $(counter).html(text_max);

  $(input).keyup(function() {
    let text_length = $(this).val().length;
    let text_remaining = text_max - text_length;

    $(counter).html(text_remaining);
  });
}

https://jsfiddle.net/o20q79n8/

它为每个具有 id 和 maxlength 属性的输入运行函数 inputLengthCounter。

【讨论】：