JQuery обновляет счетчик символов после вставки большего количества символов, чем максимальная длина
У меня есть форма с текстовым полем, и я пытаюсь запретить пользователям вставлять в нее более 1000 символов. У меня есть div, который отображает количество оставшихся символов по типу пользователя, что является проблемой. У меня работает вставка, но я одновременно пытаюсь установить счетчик символов.
Вот код:
<textarea name = "Note" id = "Note" cols = "80" rows = "5" class = "text-input shadow form-control" maxlength = "1000"></textarea>
<div id = "NoteLength"></div>
<div>characters remaining.</div>
и jQuery:
$("#NoteLength").text("1000");
//user is typing
$("#Note").keyup(function () {
el = $(this);
if (el.val().length >= 1000) {
el.val(el.val().substr(0, 1000));
} else {
$("#NoteLength").text(1000 - el.val().length);
}
});
//user is pasting
$("#Note").blur(function (event) {
var maxLength = 1000;
var length = this.value.length;
if (length > maxLength) {
$("#NoteLength").text("0");
this.value = this.value.substring(0, maxLength);
}
});
Он усекает текст, как ожидалось, но не сбрасывает значение div NoteLength, если я вставляю большой кусок текста, скажем, 1500 символов. Если я вставляю блоки по 200 символов, счетчик работает нормально. Работает, если я возвращаюсь назад к последнему вставленному символу, но не тогда, когда я перехожу в одну пасту, что, к сожалению, является наиболее вероятным пользовательским сценарием.
Это определенно обсуждалось раньше ...
Ну, конечно, это не обновление длины заметки. Это в вашем предложении else вашего обработчика событий keyup ...
Да, практически все обсуждалось раньше. Пример, который вы опубликовали, - это всплывающее предупреждение, а не отображение счетчика, и, поскольку это та часть, на которой я застрял, возможно, мы сможем отказаться от немедленного `` дублирующего '' заряда, который стал настолько популярным. Если у вас нет ничего о счетчике, продолжайте.
Taplar, эта часть на самом деле работает, это когда пользователи печатают.
Верно, но вы говорите, что если они превышают максимальную длину, она не обновляется. Это потому, что else не используется, это единственное место в клавиатуре, в котором вы обновляете длину ноты. Если вы переместите эту часть за пределы else и полностью удалите else, она должна обновить длину заметки, если вы превысите длину или нет.
Я пытаюсь обновить его после проверки (length> maxlength).
Что происходит при размытии, которое срабатывает, когда элемент теряет фокус. Вставляемый элемент по-прежнему будет иметь фокус
Хорошо, размытие. Когда я выключаю его, он обновляется. Возможно, мне нужно будет попробовать другое мероприятие.
Также length > maxLength не учитывает, равны ли значения
Хороший улов, но меня больше беспокоят люди, которые переберутся, чем тысяча.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать событие ввода, чтобы зафиксировать изменение любой значения ввода пользователем.
$("#NoteLength").text("1000");
//user is changing the input value, typing or pasting, all of it
$("#Note").on('input', function () {
if (this.value.length > 1000) {
this.value = this.value.substr(0, 1000);
}
$("#NoteLength").text(1000 - this.value.length);
});
Ага, вот и все. Спасибо, Таплар!
@TrevorGoodchild Но мне любопытно. Я вижу, что в вашей разметке у вас установлена максимальная длина входного элемента. Как пользователь может превзойти это? Браузер должен их остановить.
Браузер их останавливает, но я понял это позже. Я возвращаю код, чтобы просто обработать счетчик.
Возможный дубликат ограничить количество символов, которые можно вставить в текстовое поле