Обнаружение изменения значения ввода [type = text] в jQuery

159

Я хочу выполнять функцию каждый раз, когда изменяется значение определенного поля ввода. Это почти работает с$('input').keyup(function) , но ничего не происходит, например, при вставке текста в поле. $input.change(function)срабатывает только тогда, когда ввод размыт, так как я сразу узнаю, когда текстовое поле изменило значение?

Jeriko
источник
2
Так почему бы не связать keyupи pasteсобытия, и события?
Илья G
devcurry.com/2009/07/… - Обнаружение событий вырезания / копирования / вставки
BeRecursive
2
@ liho1eye paste- это только то, о чем я подумал, я предпочел бы прислушаться к определенным изменениям, чем думать о всех возможных путях.
Джерико
@Jeriko Это единственный способ изменить значение (кроме очевидного обновления через js-код).
Илья Г
Вы также хотите захватить Ctlr-X ( cut).
Алексис Уилке

Ответы:

344

просто помните, что 'on' рекомендуется через функцию 'bind', поэтому всегда старайтесь использовать прослушиватель событий, например так:

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});
Алехандро Силва
источник
Почему pasteхоть? Сначала я подумал, что это работает, только если мы вставим что-нибудь CTRL+V.
черный
3
@ NicolasS.Xu: прямое присвоение значений не вызывает событие DOM
Алехандро Сильва
Было бы еще лучше, если бы console.log()вместо alert. Было бы очень неприятно для Keyup для alert.
cytsunny
4
@cytsunny Да, конечно, оповещение раздражает, но в данном случае это пример кода, который должен выполняться при изменении значения, это действительно может быть любая полезная нагрузка, которую вы хотите.
Алехандро Сильва
1
Если щелкнуть правой кнопкой мыши и вставить, это вернет значение ввода до вставки.
18:18
104

Описание

Вы можете сделать это, используя .bind()метод jQuery . Проверьте jsFiddle .

Образец

Html

<input id="myTextBox" type="text"/>

JQuery

$("#myTextBox").bind("change paste keyup", function() {
   alert($(this).val()); 
});

Больше информации

dknaack
источник
15

Попробуйте это .. кредиты на https://stackoverflow.com/users/1169519/teemu

для ответа на мой вопрос здесь: /programming/24651811/jquery-keyup-doesnt-work-with-keycode-filtering?noredirect=1#comment38213480_24651811

Это решение помогло мне продвинуться в моем проекте.

$("#your_textbox").on("input propertychange",function(){

   // Do your thing here.
});

Примечание: propertychange для более низких версий IE.

Andres
источник
6

Вы также можете использовать события текстового поля -

<input id="txt1" type="text" onchange="SetDefault($(this).val());" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">

function SetDefault(Text){
  alert(Text);
}

Попробуй это

Ишан Джайн
источник
5

Попробуй это:

В основном, просто учтите каждое событие:

Html:

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

Jquery:

$("#textbox").keyup(function() { 
    alert($(this).val());  
}); 

$("#textbox").change(function() { 
alert($(this).val());  
}); 
H Беллами
источник
3
$("#myTextBox").on("change paste keyup select", function() {
     alert($(this).val());
});

выберите для предложения браузера

мохамад йезданпанах
источник
2

Попробуй это:

$("input").bind({
            paste : function(){
                $('#eventresult').text('paste behaviour detected!');
            }
})
Хамед Хосрави
источник
0

Используйте это: https://github.com/gilamran/JQuery-Plugin-AnyChange

Он обрабатывает все способы изменения ввода, в том числе меню содержимого (с помощью мыши)

gilamran
источник
Как Вы этим пользуетесь? Я включил его в свой HTML и использовал $ ("input"). AnyChange (function (e) {console.log (e);}); Но он так и не попал в строку console.log
Офер Гал
0

Эта комбинация событий работала для меня:

$("#myTextBox").on("input paste", function() {
   alert($(this).val()); 
});
Нола
источник
0

НЕ ЗАБУДЬТЕ cut или selectСОБЫТИЕ!

Принятый ответ почти идеален, но забывает о cut и selectсобытиях.

cut срабатывает, когда пользователь обрезает текст (CTRL + X или щелчок правой кнопкой мыши)

select срабатывает, когда пользователь выбирает предложенную браузером опцию

Вы должны добавить их тоже, как таковые:

$("#myTextBox").on("change paste keyup cut select", function() {
   //Do your function 
});
Оскар Чемберс
источник