0

Введение : Есть два экземпляра 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>

2 ответа 2

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>

1
  • Спасибо, ваш вариант помог! 8 июл 2021 в 15:33
0
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);
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.