Определить измененное поле ввода текста


289

Я просмотрел множество других вопросов и нашел очень простые ответы, включая приведенный ниже код. Я просто хочу определить, когда кто-то изменяет содержимое текстового поля, но по какой-то причине оно не работает ... Я не получаю ошибок консоли. Когда я устанавливаю точку останова в браузере на change()функцию, она никогда не срабатывает.

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});
<input id="inputDatabaseName">

1
просто пара вещей, которые нужно попробовать: дать вводу type = "text" и сделать его одноэлементным элементом. <input id = "inputDatabaseName" type = "text" />
szeliga

Убрал ненужный код, только на 7 лет опоздал.
Адвокат дьявола

Ответы:


523

Вы можете использовать inputсобытие Javascript в jQuery следующим образом:

$('#inputDatabaseName').on('input',function(e){
    alert('Changed!')
});

В чистом JavaScript:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

Или вот так:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>

1
Не могу найти документацию для этого события, но она работает именно так, как я ожидаю. Любая идея, где я могу найти страницу документа?
Хорхе Педрет,

3
Вы можете найти его в списке событий HTML5: w3schools.com/tags/ref_eventattributes.asp или здесь help.dottoro.com/ljhxklln.php
Уади

7
Это решение на самом деле намного лучше, чем использование keyup. Например, IE позволяет пользователю очистить поле ввода, нажав X, который не вызывает keyup.
Георг,

7
Ближайшее решение до сих пор, но все еще не работает, когда браузер выполняет автозаполнение текстовых полей.
Saumil

3
Это намного лучше, чем первый ответ. Клавиши Ctrl, Shift все считаются как keyup. И хуже всего то, что если вы наберете быстро, несколько вводов будут регистрироваться как только одно событие keyup.
Октябрь

174

попробуйте keyup вместо изменения.

<script type="text/javascript">
   $(document).ready(function () {
       $('#inputDatabaseName').keyup(function () { alert('test'); });
   });
</script>

Вот официальная документация jQuery для .keyup () .


1
вздыхаю, клянусь, я попробовал это (посмотрев на этот вопрос: stackoverflow.com/questions/1443292/… ) ... но, видимо, не потому, что это работает сейчас!
Адвокат дьявола

27
Изменение срабатывает только тогда, когда элемент теряет фокус, а клавиша запускается при отпускании клавиши на клавиатуре.
Деклан Кук

9
Что делать, если пользователь вставляет код с помощью Ctrl + V или перетаскивая выделенный текст с помощью мыши на #inputDatabaseName? Как вы это обнаружили?
Раду Симионеску

5
Основная проблема в том, что он по-прежнему не учитывает, действительно ли меняется содержание. Только то, что кнопка была нажата
Метрополис

@ Метрополис, ты видел мой ответ ?? stackoverflow.com/a/23266812/3160597
Азерафати

103

В каждом ответе не хватает некоторых моментов, поэтому вот мое решение:

$("#input").on("input", function(e) {
  var input = $(this);
  var val = input.val();

  if (input.data("lastval") != val) {
    input.data("lastval", val);

    //your change action goes here 
    console.log(val);
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>

В Input Eventпожарах на клавиатуры ввода, двигай мышь , автозаполнение и Copy-Paste протестированы на Chrome и Firefox. Проверка предыдущего значения позволяет обнаружить реальные изменения, что означает отсутствие стрельбы при вставке одной и той же вещи, наборе того же символа и т. Д.

Рабочий пример: http://jsfiddle.net/g6pcp/473/


Обновить:

И если вам нравится запускать change function только тогда, когда пользователь заканчивает вводить текст и предотвращать запуск действия изменения несколько раз, вы можете попробовать это:

var timerid;
$("#input").on("input", function(e) {
  var value = $(this).val();
  if ($(this).data("lastval") != value) {

    $(this).data("lastval", value);
    clearTimeout(timerid);

    timerid = setTimeout(function() {
      //your change action goes here 
      console.log(value);
    }, 500);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">

Если пользователь начинает вводить текст (например, «foobar»), этот код запрещает change actionзапускать все типы пользовательских букв и запускается только тогда, когда пользователь прекращает вводить текст. Это особенно полезно, когда вы отправляете ввод на сервер (например, ввод для поиска), что процессорный сервер делает только один поиск , foobarа не шесть поисков , fа затем , foа затем fooи foobи так далее.


1
Это было первым, чтобы работать с 6 я попробовал. Потрясающие. Спасибо.
Энкоде

Почти работает в IE9: если вы удаляете символ, событие не запускается. Очень хороший обходной путь, хотя
Сома

@Soma, как говорят другие, «взлом IE не является недостатком, это особенность»;) хотя IE больше не продолжается, но если у вас есть исправление, дайте нам знать
azerafati

Я знаю, но я должен был сделать это для работы :( По сути, я делаю: использовать $("#input").focusout(function () {}). Когда вы нажимаете за пределами вашего ввода, событие запускается. Работает на текущей версии Chrome и Firefox, а IE9
Soma

2
@ Сома, если это единственный способ работы IE, вы можете использовать его, меняя только эту строку$("#input").on("input focusout",function(e){
azerafati

18

Текстовые вводы не запускают changeсобытие, пока не потеряют фокус. Нажмите за пределами ввода, и появится предупреждение.

Если обратный вызов должен сработать до того, как ввод текста потеряет фокус, используйте .keyup()событие.


changeздесь работает: jsfiddle.net/g6pcp ; keyupоповещение после каждого ключа, который не является хорошим способом
diEcho

1
@diEcho Я думаю, что предупреждение - это всего лишь пример того, как работает его код ... не то, что он намерен сделать в конце.
Скотт Харвелл

@diEcho Что Скотт сказал, это было только для целей тестирования. Вот как я отлаживаюсь: D
Адвокат дьявола

@ Скотт, пожалуйста, пожалуйста, используйте правильный отладчик, а не alert(). Это сделает отладку намного проще.
Мэтт Болл

13

onkeyup, onpaste, onchange, oninputкажется, что происходит сбой, когда браузер выполняет автозаполнение текстовых полей. Чтобы обработать такой случай, включите " autocomplete='off'" в текстовое поле, чтобы браузер не заполнял текстовое поле автоматически,

Например,

<input id="inputDatabaseName" autocomplete='off' onchange="check();"
 onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />

<script>
     function check(){
          alert("Input box changed");
          // Things to do when the textbox changes
     }
</script>

3

В моем случае у меня было текстовое поле, которое было прикреплено к средству выбора даты. Единственное решение, которое сработало для меня, - это обработать его внутри события onSelect средства выбора даты.

<input type="text"  id="bookdate">

$("#bookdate").datepicker({            
     onSelect: function (selected) {
         //handle change event here
     }
});

0

Я думаю, что вы keydownтоже можете использовать :

$('#fieldID').on('keydown', function (e) {
  //console.log(e.which);
  if (e.which === 8) {
    //do something when pressing delete
    return true;
  } else {
    //do something else
    return false;
  }
});

-5

РАБОТАЕТ:

$("#ContentPlaceHolder1_txtNombre").keyup(function () {
    var txt = $(this).val();
        $('.column').each(function () {
            $(this).show();
            if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
                $(this).hide();
            }
        });
    //}
});

Это похоже на код для другого вопроса ... что это за заглавные значения и показ / скрытие контента?
Нико Хаасе
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.