Установка минимальной длины во вводимом тексте дает повторяющееся предупреждающее сообщение
Я хочу, чтобы пользователь добавил минимум 10 символов в html text. Итак, для этого я установил проверку на onblur текстового поля. Ниже приведен HTML-код и его js-код.
HTML
<input type = "text" class = "form-control" id = "txtStoreSiteAsstMangrMob" maxlength = "10" onblur = "checkLength(this)" onkeypress = "return IsNumeric4(event);" ondrop = "return false;" onpaste = "return false;" />
JAVASCRIPT
function checkLength(el) {
if (el.value.length != 10) {
alert("Minimum 10 numbers are accepted");
} }
Проблема здесь в том, что проверка выполняется правильно, но сообщение отображается повторно, даже после нажатия кнопки «ОК».
Так почему это происходит именно так? Пожалуйста помоги
@JacobGoh: Я все показал, работает даже на моей стороне. Но тревога срабатывает постоянно ..
@BramVanroy: Конечно, буду иметь это в виду на будущее
Для меня он работает нормально. Возможно, проблема в другом, о чем вы здесь не упомянули.
@HarshJaswal: Я попробую еще раз и проверю
А также условие внутри оператора if должно быть похоже на el.value.length < 10, а не на el.value.length != 10.
@HarshJaswal: вы можете сказать мне, как мне сосредоточиться после предупреждения в моем коде?
@JacobGoh: Думаю, установка фокуса после предупреждения вызывает проблему .. вот что я написал для фокуса el.focus();
Попробуй один раз без фокуса
да, без фокуса он работает отлично .. Итак, что мне теперь делать?
Позвольте нам продолжить обсуждение в чате.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
вы используете el.value.length != 10, это означает, что если длина больше 10, то сообщение будет отображаться, если меньше 10, то также будет отображаться сообщение.
В вашем коде, если вход имеет ровно длину 10 сообщений, сообщение не будет отображаться.
Но вы хотите проверить, если длина <10, затем показать сообщение, а если больше 10, то ничего не показывать.
Так что думаю лучше использовать:
el.value.length < 10
function checkLength(el) {
if (el.value.length != 10) {
alert("Minimum 10 numbers are accepted");
}
}<html>
<body>
<input type = "text" class = "form-control" id = "txtStoreSiteAsstMangrMob" maxlength = "10" onblur = "checkLength(this)" onkeypress = "return IsNumeric4(event);" ondrop = "return false;" onpaste = "return false;" />
</body>
</html>у меня ваш код работает нормально .. пожалуйста, проверьте еще раз .. Насколько я понимаю, если мы используем проверки полей ввода с помощью функции onBlur, фокус может доставить вам проблемы с этим типом проблем ..
Использование обработчика событий onblur на нескольких входах может привести к одному и тому же результату, результат может отличаться от браузера к браузеру.
Вариант 1. Избегайте использования js alert () с onblur.
Вариант 2. Поместите базовые проверки в отправку формы вместо размытия ввода.
Using onblur event handler on more than one inputs, can result the same thing. Я просто показываю вам, что этот пункт неверен
вот способ заставить его работать, когда вы хотите постоянно его перефокусировать
демо https://codepen.io/jacobgoh101/pen/PeLaRw?editors=1011
сохранить состояние в атрибуте данных элемента, например, data-should-alert, установите для него значение false после одного предупреждения, чтобы функция могла решить, где или не выдавать предупреждение снова. снова установите для него значение true, как только пользователь начнет что-то вводить.
function checkLength(el) {
if (el.getAttribute('data-should-alert')==='false') return;
if (el.value.length != 10) {
alert("Minimum 10 numbers are accepted");
el.setAttribute('data-should-alert', 'false');
el.focus();
}
}
function handleKeydown(el) {
el.setAttribute('data-should-alert', 'true');
}
@BNN в этом случае глобальная переменная не подходит. состояние может храниться внутри атрибута данных каждого элемента. ответ обновлен
На самом деле это удивительно, потому что alert является синхронным, поэтому скрипт ждет, пока диалоговое окно с предупреждением не будет закрыто, чтобы продолжить. Таким образом, в этом случае el.focus() должен работать только после того, как пользователь нажмет кнопку ОК в окне предупреждения.
@HarshJaswal Я думаю, что это все еще синхронно. Но что-то заставляет ввод размываться сразу после фокусировки. Интересно, что это могло быть
Он ведет себя как recursion, который превратился в бесконечный цикл. фокус ... размытие ... фокус ... размытие и так далее ....
Попробуйте ниже демо скрипта, и оно очистит ваше требование:
HTML:
<input type='text' id='text'/>
JS:
function textLength(value){
var maxLength = 10;
if (value.length > maxLength) return false;
return true;
}
document.getElementById('text').onkeyup = function(){
if (!textLength(this.value)) alert('text is too long!');
}
Установка минимальной длины во вводимом тексте дает повторяющееся предупреждающее сообщение
Я нашел здесь:
Подсчет входных символов - использовать onkeyup или onkeydown?
оно работает. codepen.io/jacobgoh101/pen/QromYV?editors=1111. так это вызвано тем, что вы нам не показали