Запустите javascript / jquery после изменения текста, но перед отправкой

#javascript #jquery

Вопрос:

У меня есть элемент ввода в форме вместе с кнопкой отправки.

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

Сразу после того, как пользователь нажимает кнопку отправки, форма отправляется (например, изменение не успевает запуститься, то же самое происходит с размытием или фокусом).

Мои элементы управления могут быть размещены в любой форме, и я не контролирую событие нажатия кнопки.

Помогите, пожалуйста

Ответ №1:

Если вы хотите отслеживать всякий раз, когда ввод в текстовом поле изменяется, попробуйте это в document.ready

 $("input[type='text']").change( function() { 
   $("#SubmitButton").attr('disabled', 'disabled');
   // check input ($(this).val()) for validity here 
   // after text is updated..etc, enable the button
   $("#SubmitButton").removeAttr('disabled');
});

1. Да, в настоящее время я делаю это, однако пользователь все еще может изменить текст, а затем нажать кнопку отправки без запуска события изменения. Форма отправляется до того, как изменение может быть запущено.

2. Похоже, что отправка началась, и хотя я визуально вижу изменение входного значения, отправка уже началась, и, следовательно, у меня нет возможности обновить текстовое значение

3. Вы можете отключить кнопку отправки до завершения функции изменения

4. Или, как упоминал Алекс, вы можете попробовать событие onkeyup или onkeypress. $(‘input[type=’text’]’).bind(‘нажатие клавиши’, функция (e){})

Ответ №2:

может быть, вы хотите использовать event.preventDefault

Ответ №3:

Расширяя комментарий @Aleks G, лучшее, что вам нужно сделать, это запустить обработку изменений не только change для события. Кроме keyup того, я обнаружил, что вам также нужно быть осторожным при обработке вставки с помощью мыши (не вызывает событие ввода или изменения):

 yourInput.bind('change keyup paste', function() {
    // Your code
});