Счётчик символов в textarea на JQuery

Question

Введение : Есть два экземпляра textarea, и два счётчика под ними. Так же есть один общий обработчик количества символов, написанный на JQuery.

Проблема в том, что при вводе текста в один из textarea, количество символов дублируется в двух счётчиках одновременно, а нужно чтобы каждый счётчик работал со своим экземпляром textarea по отдельности.

P.S : Так же хотелось бы узнать, как сделать чтобы счётчик выводил значение из textarea заранее, без необходимости ввода в поле хотя-бы одного символа (То-есть чтобы нормально работать с данными которые берутся из БД)

Код (JS) :

$('textarea').on("input", function() {
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;
    
    $('[id*=chars_current_]').html(maxlength - currentLength);
    $('[id*=chars_total_]').html(maxlength);    
});

Код (HTML) :

<span class="small">
        <span id="chars_current_1">0</span>
        /
        <span id="chars_total_1">0</span>
</span>
<label>
        <textarea maxlength="640"></textarea>
</label>

Второй экземпляр :

<span class="small">
        <span id="chars_current_2">0</span>
        /
        <span id="chars_total_2">0</span>
</span>
<label>
        <textarea maxlength="140"></textarea>
</label>

Answer 1

Если можно изменить структуру, то я думаю лучше сделать так.

$('textarea').on("input", function() {
    const maxlength = $(this).attr("maxlength");
    const currentLength = $(this).val().length;
    
    $(this).siblings('.chars-current').html(maxlength - currentLength);
    $(this).siblings('.chars-total').html(maxlength);    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<label>
        <textarea maxlength="640"></textarea>
        
        <span class="chars-current">0</span>
        /
        <span class="chars-total">0</span>
</label>


<label>
        <textarea maxlength="641"></textarea>
        
        <span class="chars-current">0</span>
        /
        <span class="chars-total">0</span>
</label>

Answer 2

let textareas = $('textarea');

textareas.each(function() {
    let $element = $(this);

    $element.on("input", function() {
        countWordsHandler($element);
    });

    countWordsHandler(this);
});

function countWordsHandler($element) {
    let maxlength = $element.attr("maxlength"),
        currentLength = $element.val().length,
        $currentChars = $element.parrents('.someparent').find('[id*=chars_current_]'),
        $totalChars = $element.parrents('.someparent').find('[id*=chars_total_]');

    $currentChars.text(maxlength - currentLength);
    $totalChars.text(maxlength);
}

БЛОГ НА HUSL

Счётчик символов в textarea на JQuery

Ответы (2 шт):