Как отследить изменение текста поля ввода?

Question

[Максим Васильев]

Событие «change» срабатывает только после смещения фокуса с изменённого input.

А хочется, чтобы сразу, как только пользователь полез что-то изменять.

$("input").on("edit", function() { <br>
  /* добавить в заголовок формы предупреждение "не сохранено" */<br>
  /* заблокировать закрытие окошка по ESC */<br>
});<br>

Answer 1

[DemiurgeOrion]

Есть замечательный плагин jQuery Text Change

www.zurb.com/playground/jquery-text-change-custom-event

Comments

[Максим Васильев]

спасибо! именно то что нужно!

[MickG]

Да, отслеживает в том числе ввод текста с помощью CTRL+V или с помощью контекстного меню.

[Иван Ильясов]

Отличный плагин, но, к сожалению, это не работает если поле input изменяет ползунок (jQuery UI Slider)

Answer 2

[marsdenden]

Я понимаю, что уже много времени прошло, но на будущее

$(document).on("input",function(ev){
  console.log($(ev.target).val());
});

ловит все изменения, включая копипаст

Answer 3

[try4tune]

onKeyPress?

Comments

[Максим Васильев]

Так ведь сюда попадут нажатие стрелок, таба, и прочее, которое текст не меняет.

[try4tune]

А Вы проверьте поменялось ли значение.

[Всеволод]

Я в свое время использовал именно onKeyPress (ну или onkeyUp), ничего более подходящего не нашел

Answer 4

[ligaliga]

Событие input. Оно как раз сразу реагирует:
https://learn.javascript.ru/events-change

Comments

[Максим Васильев]

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

Как, например, на www.w3schools.com

[ligaliga]

Нашел статью: danielfriesen.name/blog/2010/02/16/html5-browser-m..., от 2010 года!) Где уже обсуждали это событие) Ослик догнал лишь в 9 версии...

Firefox 2 through 3.5 has support for oninput, Only test method C works to detect support.
Chrome supports oninput. Test method A works to detect support.
Opera 10 supports oninput and additionally onforminput, however it violates spec by firing an additional oninput when the onchange event is fired when the value is the same as the last user input (ie: if you type asdf you get events for "a", "as", "asd", "adsf", and an unwanted extra event for "asdf" when you blur the input). Test method A works to detect support.
IE7 and IE8 don't support oninput. It's unknown if IE9 does. (Update 2011-05-11: Going by comments on Zoltan Hawryluk's post linked to in the comments IE9 does support oninput)

Answer 5

[Анатолий]

onfocus — сохраняем длину текста в поле
onkeyUp — проверяем длину текста в поле, и если она не равна, то текст был изменен.

Comments

[Всеволод]

А если я выделю один символ и нажму клавишу? Я так действительно иногда делаю.

[Максим Васильев]

ну тогда уж весь текст сохранять.

Answer 6

[mikenerevarin]

OnInput?

Comments

[egorinsk]

А что минусуете, двоечники, событие input есть в w3c браузерах, и включает, кстати, не только ввод с клавиатуры, но и другими способами.

Answer 7

[serso]

api.jquery.com/change/

Comments

[Максим Васильев]

For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

[Анатолий]

— Мне не нравится событие change, оно работает чуть не так как мне нужно.
— Может Вам стоит попробовать событие change?

Не кажется забавным?

[serso]

Я жутко извиняюсь — проглядел, посмотрел сразу код, а там «edit», вот и подумал не о том, что нужно. Самому тогда интересно узнать ответ на вопрос. В GWT это решается именно onChangeListener'ом…

Answer 8

[Fr3nzy]

Пришлось мне для какого-то браузера недавно писать нечто подобное:

setInterval(function(){
    var curVal = $(".someInputs").val();
    var prevVal  = $(".someInputs").data("prevVal") || null;
    

    if (prevVal !== curVal) {
        // value changed
    }
}, 100)

А, вспомнил, это на тот случай, когда в поле происходила вставка тем или иным образом (ctrl+v, через контекстное меню, etc...)

Comments

[Fr3nzy]

А вообще, да, если не нужно обрабатывать вставку, то onKeyPress ваш вариант. Делайте просто проверку на то, какую клавишу нажали. Вернее, не нажали — в вашем случае :)

[Максим Васильев]

обоже. зачем же тут интервал? на случай, если мышой копипаст какойто сделали?

[Fr3nzy]

Ага, требования такие были. Ну он, естественно, более умно и выборочно весился. Но все равно бред.

Answer 9

[Pavel Isakov]

Я бы не забывал про вставку текста из буфера обмена с помощью мышки.