Как настроить динамический счетчик символов для разных входов и текстовых полей на одной странице с разными максимальными длинами на каждой странице? - PullRequest
Новая
       55

Как настроить динамический счетчик символов для разных входов и текстовых полей на одной странице с разными максимальными длинами на каждой странице?

0 голосов
/ 11 октября 2019

У меня есть страница продукта с несколькими текстовыми вводами и одним вводом текста. 3 текстовых ввода имеют максимальную длину 18, 1 текстовый ввод имеет максимальную длину 5, а 1 текстовое поле имеет максимальную длину 255. Как настроить счетчики символов для каждого элемента без написания нескольких функций?

I 'Мы установили базовую функцию, которая изменяет счетчик символов html со значения .form-input, но очевидно, что он применяется ко всем счетчикам. У меня проблемы с указанием его для каждого отдельного ввода и textarea. 

<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);
    });
});

Я ожидаю обновления счетчика символов каждого ввода / textarea при вводе в этом конкретном input / texarea.

Ответы [ 2 ]

2 голосов
/ 11 октября 2019

Где у вас это есть: 

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, чтобы получить длину текста и получить максимальную длинуатрибут для элемента ввода

1 голос
/ 11 октября 2019

Я использовал Ваш код для большей функциональности. Вот пример: 

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

Он запускает функцию inputLengthCounter для каждого входа, имеющего атрибут id и maxlength.

...