Во время ввода javascript

How can I run a javascript function when input changes

When a user creates a new account on my website I want to check if the name already exists. I want this check to run when they leave the username input box and go to enter a password. I tried :

What you are looking for is the blur event. But @Awais provided an even better solution, as the change event will be raised, when the input looses focus, but only if the text changed.

5 Answers 5

Call the function on the change event of text field:

i did this but when switch between inputs by clicking on others or tab for switch function didnt respond!

You need to use the «onblur» event. It fires when a control loses its focus, which seems to be exactly what you need.

Because you used onkeyup in your code example, it sounds like you are looking to call a function on every keystroke. If that is the case, then instead of onchange — which fires when the input loses focus — you should use oninput which will fire anytime there is a change inside of input.

I think you are looking for check the duplication of user. you have to write server side code for that.

If you want to fire when something specific is type into the window:

phr = 'lol' ltr = phr.split('') text = '' document.addEventListener('keyup',function(k) < if (ltr.includes(k.key)) < text += k.key if (text == phr) < console.log('Typed!') text = '' >> else < text = '' >>) 

As a function your can use it like:

function wtt(phrase,clb) < phr = phrase ltr = phr.split('') text = '' document.addEventListener('keyup',function(k)< if (ltr.includes(k.key)) < text += k.key if (text == phr) < clb() text = '' >> else < text = '' >>) > wtt('my phrase', function () < console.log('dostuff') >) 

Источник

input

Input — событие, срабатывающее каждый раз при изменении значения.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Событие input возникает, когда пользователь изменяет содержимое поля для ввода информации.

Событие input возникает когда DOM-дерево обновляется или вот-вот обновится. Если пользователь вставит текст из буфера обмена, то событие input возникнет один раз. Если же пользователь печатает текст, то событие input возникает после добавления (и удаления) каждого символа.

Простой пример

Скопировать ссылку «Простой пример» Скопировано

 Введите текст: При каждом изменении возникает событие input:   var inputTextField = document.getElementById('textField'); var outputTextField = document.getElementById('textResult'); inputTextField.oninput = function()  outputTextField.value = inputTextField.value; >;  label>Введите текст: input type="text" id="textField"> label> label>При каждом изменении возникает событие code>inputcode>: textarea disabled id="textResult">textarea> label> script> var inputTextField = document.getElementById('textField'); var outputTextField = document.getElementById('textResult'); inputTextField.oninput = function()  outputTextField.value = inputTextField.value; >; script>    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 const textInput = document.querySelector('input[type=text]'); function callback(evt)  console.log(`Произошло событие $`);> textInput.addEventListener('input', callback); /* Если теперь ввести в текстовое поле слово «Дока» и щёлкнуть вне этого поля, в консоли будут показаны сообщения: 4 раза: Произошло событие input*/ const textInput = document.querySelector('input[type=text]'); function callback(evt)  console.log(`Произошло событие $evt.type>`); > textInput.addEventListener('input', callback); /* Если теперь ввести в текстовое поле слово «Дока» и щёлкнуть вне этого поля, в консоли будут показаны сообщения: 4 раза: Произошло событие input */    Скопировать Скопировано Не удалось скопировать   

Отличие от события change

Скопировать ссылку «Отличие от события change» Скопировано

События input и change похожи — оба помогают отслеживать изменения в полях ввода.

Различие есть для текстовых полей ввода:

• input — срабатывает при каждом изменении значения в поле;
• change — срабатывает когда изменяемый элемент теряет фокус: например, при переходе к другому полю или клику на другую часть страницы.

Для прочих полей ввода они работают одинаково:

 Кликните: Типы событий:   const checkbox = document.querySelector('[name=checkbox-input]'); const textArea = document.querySelector('[name=checkbox-result]'); function handleCheckboxChange(evt)  textArea.value += evt.type + '; '; > checkbox.addEventListener('input', handleCheckboxChange); checkbox.addEventListener('change', handleCheckboxChange);  label>Кликните: input type="checkbox" name="checkbox-input"> label> label>Типы событий: textarea disabled name="checkbox-result">textarea> label> script> const checkbox = document.querySelector('[name=checkbox-input]'); const textArea = document.querySelector('[name=checkbox-result]'); function handleCheckboxChange(evt)  textArea.value += evt.type + '; '; > checkbox.addEventListener('input', handleCheckboxChange); checkbox.addEventListener('change', handleCheckboxChange); script>    Скопировать Скопировано Не удалось скопировать   

Примечания

Скопировать ссылку «Примечания» Скопировано

• если текст не меняется, например при нажатиях клавиш влево ⇦ , вправо ⇨ , Control , Alt , Shift ;
• если тег имеет атрибут type = «button» или type = «submit» ;
• если поле изменит не пользователь, а код JS. Чтобы в этом случае получить событие input нужны дополнительные действия, например использовать dispatch Event ( ) .

Источник

Взаимодействие с пользователем: alert, prompt, confirm

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/alert-prompt-confirm.

В этом разделе мы рассмотрим базовые UI операции: alert , prompt и confirm , которые позволяют работать с данными, полученными от пользователя.

alert

alert выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК».

Окно сообщения, которое выводится, является модальным окном. Слово «модальное» означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберётся с окном. В данном случае – пока не нажмёт на «OK».

prompt

Функция prompt принимает два аргумента:

result = prompt(title, default);

Она выводит модальное окно с заголовком title , полем для ввода текста, заполненным строкой по умолчанию default и кнопками OK/CANCEL.

Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием Esc на клавиатуре.

Вызов prompt возвращает то, что ввёл посетитель – строку или специальное значение null , если ввод отменён.

Единственный браузер, который не возвращает null при отмене ввода – это Safari. При отсутствии ввода он возвращает пустую строку. Предположительно, это ошибка в браузере.

Если нам важен этот браузер, то пустую строку нужно обрабатывать точно так же, как и null , т.е. считать отменой ввода.

Как и в случае с alert , окно prompt модальное.

var years = prompt('Сколько вам лет?', 100); alert('Вам ' + years + ' лет!')

Второй параметр может отсутствовать. Однако при этом IE вставит в диалог значение по умолчанию «undefined» .

Запустите этот код в IE, чтобы понять о чём речь:

Поэтому рекомендуется всегда указывать второй аргумент:

confirm

confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL.

Результатом будет true при нажатии OK и false – при CANCEL( Esc ).

var isAdmin = confirm("Вы - администратор?"); alert( isAdmin );

Особенности встроенных функций

Конкретное место, где выводится модальное окно с вопросом – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять.

С одной стороны – это недостаток, так как нельзя вывести окно в своём, особо красивом, дизайне.

С другой стороны, преимущество этих функций по сравнению с другими, более сложными методами взаимодействия, которые мы изучим в дальнейшем – как раз в том, что они очень просты.

Это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.

Резюме

• alert выводит сообщение.
• prompt выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или null , если ввод отменён (CANCEL/ Esc ).
• confirm выводит сообщение и ждёт, пока пользователь нажмёт «OK» или «CANCEL» и возвращает true/false .

Источник

Шпаргалка по JavaScript №3 — Ввод информации.

В этой статье рассмотрены различные методы ввода информации. Стоит уточнить, что клик мыши – это тоже вводимая информация, поэтому именно с него мы и начнем.

Первый вариант ввода информации (событие onClick).

Ввод информации несколько сложнее вывода. Но лишь немного. Такое осложнение вызвано лишь большим спектром способов осуществления ввода. Самый простой для нас способ – клик мыши.

Все в HTML имеет id, и кроме того, имеет события, которые срабатывают при различном взаимодействии с объектом (клик мыши, нажатие кнопки на клавиатуре, двойной клик, удерживание кнопки на клавиатуре и так далее). Нас интересует событие “onClick”. Рассмотрим пример:

html> head> head> body> div id='feedback' onClick='goodbyeWorld()'>Users without Javascript see this. div> script type='text/javascript'> document.getElementById('feedback').innerHTML='Hello World!'; function goodbyeWorld()  document.getElementById('feedback').innerHTML='Goodbye World!'; > script> body> html>

Некоторые пользователю отключают обработку кода JavaScript в своих браузерах. Также поисковые системы (Google, Yahoo и другие) не принимают его во внимание. Чтобы не отображать “ничего”(или для предоставления поисковикам “пищи” для поиска) при отсутствии поддержки кода JavaScript, используется именно описанная выше конструкция.

При выполнении этого скрипта будет происходить следующая последовательность действий (перерисовка будет осуществляться настолько быстро, что пользователь увидит только конечный результат):

• Будет выведен текст “Users without Javascript see this.”;
  • Если в браузере отключено выполнение JavaScript, то обработка страницы завершается;
  • В случае клика по надписи вызывается функция goodbyeWorld(). В результате ее выполнения выведенный ранее текст заменится на “Googbay World!”.

  Второй вариант ввода информации (функция prompt).

  Бывают случаи, когда клика недостаточно. Порой требуется более сложная вводимая информация, например строка или число. На этот случай существует инвертированный аналог функции alert(string) – prompt(stringTitle, stringText). Использование этой функции считается довольно дурным тоном, но может значительно помочь при отладке написанного кода. Первый параметр функции отвечает за выводимое сообщение, второй – за значение, которое по-умолчанию отображается в строке ввода (этот параметр можно опустить). Следующий пример все легко разъяснит:

  html> head> head> body> script type='text/javascript'> answer = prompt('Enter your greating', 'Hello World!'); script> body> html>

  После утверждения ответа пользователем введенная информация сохранится в переменной “answer”.

  Третий вариант ввода информации (пользовательский ввод).

  Предыдущий метод с вызовом всплывающего окна всем хорош, но, как было замечано, сильно раздражает пользователей своей назойливостью, так как сайт будет полностью заблокирован, пока не будет введена необходимая информация.

  Для создания поля ввода и кнопки подтверждения ввода используйте следующий код HTML:

  input id='userInput' size=60> button onClick='userSubmit()'>Submitbutton>br> P>div id='result'>div>
  

  Этот блок надо поместить между тэгами и . При выполнении этого кода на экране появится строка для ввода длиной в 60 символов (ее id равен “userInput”), кнопка с надписью “Submit”, при нажатии на которую будет вызвана функция userSubmit(), и пустой абзай с id равным “result”.

  Теперь припишем следующий код, который заставит страницу ожить:

  script type='text/javascript'> function userSubmit()  var UI=document.getElementById('userInput').value; document.getElementById('result').innerHTML='You typed: '+UI; > script>
  

  При нажатии на кнопку, пустой абзац будет отображать только что введенный текст. Здесь происходить следующая последовательность действий:

  • В переменную UI записывается значение поля ввода “userInput”;
  • В абзац “result” записывается текст “You typed: ” плюс содержимое переменной UI (то есть то, что находится сейчас в поле ввода “userInput”).

  Можно пойти дальше и отказаться от кнопки “Submit”, для этого замените первый введенный блок кода HTML на следующий:

  input id='userInput' onKeyUp="userSubmit()" size=60>BR> P>div id='result'>div>
  

  Теперь текст будет появляться на экране непосредственно после ввода новой буквы в поле ввода “userInput”. Попробуйте сами и убедитесь как легко, изящно и красиво работает JavaScript в связке с HTML.

  Итог.

  Мы уже научились осуществлять ввод и вывод информации. Узнали о существующих событиях, таких как onClick и onKeyUp. Подробней о всех событиях читайте в следующей статье “Шпаргалка по JavaScript №4 – События HTML”.

  Источник