Как обнаружить текстовое поле изменилось

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

1. Проверьте явно, является ли код ascii нажатой клавиши буквой \ backspace \ delete
2. Используйте замыкания, чтобы запомнить, какой текст был в текстовом поле до нажатия клавиши, и проверьте, изменилось ли это.

Оба выглядят довольно громоздко.

Начните наблюдать событие «ввода» вместо «изменения».

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

... что красиво и чисто, но может быть расширено до:

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});

Используйте событие onchange в HTML / стандартном JavaScript.

В jQuery это событие change () . Например:

$('element').change(function() { // do something } );

РЕДАКТИРОВАТЬ

После прочтения некоторых комментариев, как насчет:

$(function() {
    var content = $('#myContent').val();

    $('#myContent').keyup(function() { 
        if ($('#myContent').val() != content) {
            content = $('#myContent').val();
            alert('Content has been changed');
        }
    });
});

Событие 'change' не работает правильно, но 'input' идеален.

$('#your_textbox').bind('input', function() {
    /* This will be fired every time, when textbox's value changes. */
} );

Как насчет этого:

<JQuery 1,7

$("#input").bind("propertychange change keyup paste input", function(){
    // do stuff;
});

> JQuery 1,7

$("#input").on("propertychange change keyup paste input", function(){
    // do stuff;
});

Это работает в IE8 / IE9, FF, Chrome

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

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

Однако! Это по-прежнему не учитывает каждое изменение, потому что есть способы редактирования содержимого текстового поля, которые не требуют нажатия клавиш. Например, выделение диапазона текста, затем щелчок правой кнопкой мыши. Или перетаскивая его. Или сбросив текст из другого приложения в текстовое поле. Или изменение слова с помощью проверки правописания в браузере. Или...

Так что, если вы должны обнаружить каждое изменение, вы должны опросить его. Вы можете window.setIntervalпроверять поле по его предыдущему значению каждую (скажем) секунду. Можно также подключить onkeyupк одной и той же функции , так что изменения, которые вызваны нажатиями отражаются быстрее.

Громоздкий? Да. Но это так или просто делайте это обычным способом обмена HTML и не пытайтесь мгновенно обновлять его.

$(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

Вы можете использовать событие 'input', чтобы обнаружить изменение содержимого в текстовом поле. Не используйте «live» для привязки события, так как оно устарело в Jquery-1.7, поэтому используйте «on».

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

var searchValue = $('#Search').val();
$(function () {
    setTimeout(checkSearchChanged, 0.1);
});

function checkSearchChanged() {
    var currentValue = $('#Search').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') {
        searchValue = $('#Search').val();
        $('#submit').click();
    }
    else {
        setTimeout(checkSearchChanged, 0.1);
    }
}

Здесь следует отметить одну ключевую вещь: я использую setTimeout, а не setInterval, поскольку не хочу отправлять несколько запросов одновременно. Это гарантирует, что таймер «останавливается» при отправке формы и «запускается» по завершении запроса. Я делаю это, вызывая checkSearchChanged, когда мой вызов ajax завершается. Очевидно, вы можете расширить это, чтобы проверить минимальную длину и т. Д.

В моем случае я использую ASP.Net MVC, чтобы вы могли увидеть, как связать это с MVC Ajax, а также в следующем посте:

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

Я бы порекомендовал взглянуть на виджет автозаполнения jQuery UI. Они рассмотрели большинство случаев там, так как их кодовая база более зрелая, чем большинство из них.

Ниже приведена ссылка на демонстрационную страницу, чтобы вы могли убедиться, что она работает. http://jqueryui.com/demos/autocomplete/#default

Вы получите наибольшую выгоду от чтения источника и просмотра того, как они его решили. Вы можете найти его здесь: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .

В основном они делают все это, они связывают input, keydown, keyup, keypress, focus and blur. Тогда у них есть специальная обработка для всех видов ключей, таких как page up, page down, up arrow key and down arrow key. Таймер используется перед получением содержимого текстового поля. Когда пользователь вводит клавишу, которая не соответствует команде (клавиша «вверх», клавиша «вниз» и т. Д.), Появляется таймер, который исследует содержимое примерно через 300 миллисекунд. В коде это выглядит так:

// switch statement in the 
switch( event.keyCode ) {
            //...
            case keyCode.ENTER:
            case keyCode.NUMPAD_ENTER:
                // when menu is open and has focus
                if ( this.menu.active ) {
                    // #6055 - Opera still allows the keypress to occur
                    // which causes forms to submit
                    suppressKeyPress = true;
                    event.preventDefault();
                    this.menu.select( event );
                }
                break;
            default:
                suppressKeyPressRepeat = true;
                // search timeout should be triggered before the input value is changed
                this._searchTimeout( event );
                break;
            }
// ...
// ...
_searchTimeout: function( event ) {
    clearTimeout( this.searching );
    this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call *
        // only search if the value has changed
        if ( this.term !== this._value() ) { // * _value is a wrapper to get the value *
            this.selectedItem = null;
            this.search( null, event );
        }
    }, this.options.delay );
},

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

Таким образом, вы можете использовать виджет или скопировать код в свой собственный виджет, если вы не используете jQuery UI (или в моем случае разработку пользовательского виджета).

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

Альтернативой может быть установка таймера (через setIntval?) И сравнение последнего сохраненного значения с текущим, а затем сброс таймера. Это гарантировало бы отлов ЛЮБОГО изменения, вызванного клавишами, мышью, другим устройством ввода, которое вы не рассматривали, или даже JavaScript, изменяющим значение (еще одна возможность, о которой никто не упомянул) из другой части приложения.

Вы считаете, использовать событие изменения ?

$("#myTextBox").change(function() { alert("content changed"); });

Используйте textchangeсобытие через настроенный jQuery shim для кросс-браузерной inputсовместимости. http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (последний разветвленный github: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )

Это обрабатывает все входные теги, в том числе <textarea>content</textarea>, что не всегда работает с change keyupт. Д. (!) Только jQuery последовательно on("input propertychange")обрабатывает <textarea>теги, а вышеприведенное - шим для всех браузеров, которые не понимают inputсобытие.

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script>
<meta charset=utf-8 />
<title>splendid textchange test</title>

<script> // this is all you have to do. using splendid.textchange.js

$('textarea').on("textchange",function(){ 
  yourFunctionHere($(this).val());    });  

</script>
</head>
<body>
  <textarea style="height:3em;width:90%"></textarea>
</body>
</html>

JS Bin test

Это также обрабатывает вставку, удаление и не дублирует усилие при keyup.

Если шим не используется, используйте on("input propertychange")события jQuery .

// works with most recent browsers (use this if not using src="...splendid.textchange.js")

$('textarea').on("input propertychange",function(){ 
  yourFunctionHere($(this).val());    
});  

Там есть полный рабочий пример здесь .

<html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() {
$('.calc').on('input', function() {
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
});
});
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>

Что - то , как это должно работать, в основном потому , что focusи focusoutбудет в конечном итоге с двумя отдельными значениями. Я использую dataздесь, потому что он хранит значения в элементе, но не касается DOM. Это также простой способ сохранить значение, связанное с его элементом. Вы также можете легко использовать переменную с более высокой областью действия.

var changed = false;

$('textbox').on('focus', function(e) {
    $(this).data('current-val', $(this).text();
});

$('textbox').on('focusout', function(e) {
    if ($(this).data('current-val') != $(this).text())
        changed = true;
    }
    console.log('Changed Result', changed);
}

Этот код обнаруживает всякий раз, когда содержимое текстового поля изменяется пользователем и изменяется кодом Javascript.

var $myText = jQuery("#textbox");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
    val = $myText.val();

    if (data !== val) {
        console.log("changed");
        $myText.data("value", val);
    }
}, 100);