Jak wykryć zawartość pola tekstowego została zmieniona

Użyj zdarzenia onchange w HTML / standard JavaScript.

W jQuery jest to zdarzenie change(). Na przykład:

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

EDIT

Po przeczytaniu kilku komentarzy, co z:

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

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

Zdarzenie 'change' nie działa poprawnie, ale 'input' jest idealne.

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

A może tak:

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

> jQuery 1.7

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

To działa w IE8/IE9, FF, Chrome

Użyj zamknięcia, aby zapamiętać, jaki był tekst w polu wyboru przed obrysem klawisza i sprawdzić, czy się zmienił.

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

Możesz użyć zdarzenia "input", aby wykryć zmianę treści w polu tekstowym. Nie używaj' live 'do wiązania zdarzenia, ponieważ jest ono przestarzałe w Jquery-1.7, więc użyj 'on'.

Zakładam, że chcesz zrobić coś interaktywnego, gdy zmieni się textbox (np. pobrać niektóre dane przez ajax). Szukałem tej samej funkcjonalności. Wiem, że korzystanie z globalnego nie jest najbardziej solidne lub eleganckie rozwiązanie, ale to jest to, co poszedłem z. Oto przykład:

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);
    }
}

Jedną z kluczowych rzeczy jest to, że używam setTimeout, a nie setInterval, ponieważ nie chcę wysyłać wielu żądań w tym samym czasie. Zapewnia to, że timer "zatrzymuje się", gdy formularz jest przesłane i "rozpoczyna" po zakończeniu żądania. Robię to, wywołując checkSearchChanged po zakończeniu mojego połączenia ajax. Oczywiście możesz to rozwinąć, aby sprawdzić minimalną długość itp.

W moim przypadku używam ASP.Net MVC więc możesz zobaczyć, jak powiązać to z MVC Ajax, jak również w następującym poście:

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

Polecam spojrzeć na jQuery UI autocomplete widget. Zajmowali się tam większością spraw, ponieważ ich baza kodów jest bardziej dojrzała niż większość z nich.

Poniżej znajduje się link do strony demo, dzięki czemu można zweryfikować, że działa. http://jqueryui.com/demos/autocomplete/#default

Najwięcej korzyści uzyskasz czytając źródło i widząc, jak je rozwiązali. Znajdziesz go tutaj: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .

W zasadzie robią to wszystko, wiążą się z input, keydown, keyup, keypress, focus and blur. Następnie mają specjalną obsługę dla wszelkiego rodzaju kluczy, takich jak page up, page down, up arrow key and down arrow key. Przed pobraniem zawartości pola tekstowego używany jest timer. Gdy użytkownik wpisze klucz, który nie odpowiada poleceniu (Klawisz w górę, Klawisz w dół itd.), pojawia się timer, który odkrywa zawartość po około 300 milisekundach. Wygląda to tak w kodzie:

// 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 );
},

Powód aby użyć timera jest tak, że interfejs ma szansę być aktualizowany. Gdy Javascript jest uruchomiony, interfejs użytkownika nie może zostać zaktualizowany, dlatego wywołanie funkcji delay. Działa to dobrze w innych sytuacjach, takich jak skupienie się na polu tekstowym (używanym przez ten kod).

Więc możesz użyć widgetu lub skopiować kod do własnego widgetu, jeśli nie używasz jQuery UI (lub w moim przypadku tworzenie niestandardowego widgetu).

Chciałbym zapytać, dlaczego próbujesz wykryć, kiedy zawartość pola tekstowego zmieniła się w czasie rzeczywistym?

Alternatywą byłoby ustawienie timera (poprzez setIntval?) i porównaj ostatnio zapisaną wartość z bieżącą, a następnie zresetuj timer. Gwarantowałoby to przechwycenie każdej zmiany, czy to spowodowanej przez klawisze, mysz, inne urządzenie wejściowe, którego nie brałeś pod uwagę, czy nawet JavaScript zmieniający wartość (inna możliwość, o której nikt nie wspomniał) z innej części aplikacji.

Czy rozważasz użycie change event ?

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

Użyj zdarzenia textchange poprzez dostosowaną shim jQuery dla kompatybilności między przeglądarkami input. http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (Ostatnio rozwidlony github: https://github.com/pandell/jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js)

Obsługuje wszystkie znaczniki wejściowe, w tym <textarea>content</textarea>, które nie zawsze działają z change keyup itd. (!) Tylko jQuery on("input propertychange") obsługuje tagi <textarea>, a powyżej znajduje się shim dla wszystkich przeglądarek, które nie rozumieją zdarzenia 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

Obsługuje również wklejanie, usuwanie i nie duplikuje wysiłku na keyup.

Jeśli nie używasz shim, użyj zdarzeń jQuery on("input propertychange").

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

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

Tutaj jest kompletny działający przykład .

<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>

Coś takiego powinno zadziałać, głównie dlatego, że focus i focusout skończyłyby się dwiema oddzielnymi wartościami. Używam data tutaj, ponieważ przechowuje wartości w elemencie, ale nie dotyka DOM. Jest to również łatwy sposób na przechowywanie wartości podłączonej do jego elementu. Równie łatwo można użyć zmiennej o wyższym zasięgu.

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);
}

Ten kod wykrywa, kiedy zawartość pola tekstowego została zmieniona przez użytkownika i zmodyfikowana przez kod 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);

document.getElementById('txtrate' + rowCount).onchange = function () {            
       // your logic
};

Ten działa dobrze, ale uruchamia również zdarzenie po kliknięciu, co nie jest dobre. mój system się zapętlił. while

$('#txtrate'+rowCount).bind('input', function() {
        //your logic
} );