Das Erkennen des Inhalts eines Textfelds hat sich geändert

Ich möchte erkennen, wann sich der Inhalt eines Textfelds geändert hat. Ich kann die Keyup-Methode verwenden, aber das erkennt auch Tastenanschläge, die keine Buchstaben erzeugen, wie die Pfeiltasten. Ich dachte an zwei Methoden, um dies mit dem Keyup-Ereignis zu tun:

1. Überprüfen Sie explizit, ob der ASCII-Code der gedrückten Taste ein Buchstabe \ Rücktaste \ Löschen ist
2. Verwenden Sie Verschlüsse, um sich den Text im Textfeld vor dem Tastenanschlag zu merken und zu überprüfen, ob sich dieser geändert hat.

Beide sehen etwas umständlich aus.

Beobachten Sie das 'Eingabe'-Ereignis anstelle von' Ändern '.

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

... was schön und sauber ist, aber noch erweitert werden kann auf:

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

Verwenden Sie das Ereignis onchange in HTML / Standard-JavaScript.

In jQuery ist dies das Ereignis change () . Zum Beispiel:

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

BEARBEITEN

Was ist nach dem Lesen einiger Kommentare:

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

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

Das 'change'-Ereignis funktioniert nicht richtig, aber die' input 'ist perfekt.

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

Wie wäre es damit:

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

Dies funktioniert in IE8 / IE9, FF, Chrome

Verwenden Sie Verschlüsse, um sich den Text im Kontrollkästchen vor dem Tastendruck zu merken und zu überprüfen, ob sich dies geändert hat.

Ja. Sie müssen nicht unbedingt Verschlüsse verwenden, aber Sie müssen sich den alten Wert merken und ihn mit dem neuen vergleichen.

Jedoch! Dies wird immer noch nicht jede Änderung erfassen, da es Möglichkeiten zum Bearbeiten von Textfeldinhalten gibt, bei denen kein Tastendruck erforderlich ist. Wählen Sie beispielsweise einen Textbereich aus und klicken Sie mit der rechten Maustaste. Oder ziehen Sie es. Oder legen Sie Text aus einer anderen App in das Textfeld ab. Oder ändern Sie ein Wort über die Rechtschreibprüfung des Browsers. Oder...

Wenn Sie also jede Änderung erkennen müssen, müssen Sie danach fragen. Sie window.setIntervalkönnen das Feld jede (sagen wir) Sekunde mit seinem vorherigen Wert vergleichen. Sie könnten auch Draht onkeyupauf die gleiche Funktion , so dass Änderungen , die sich durch Drücken von Tasten verursacht schneller reflektiert werden .

Schwerfällig? Ja. Aber es ist das oder machen Sie es einfach auf die normale Art und Weise beim HTML-Wechsel und versuchen Sie nicht, sofort zu aktualisieren.

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

Sie können das Ereignis 'Eingabe' verwenden, um die Inhaltsänderung im Textfeld zu erkennen. Verwenden Sie nicht 'live', um das Ereignis zu binden, da es in Jquery-1.7 veraltet ist. Verwenden Sie also 'on'.

Ich gehe davon aus, dass Sie etwas Interaktives tun möchten, wenn sich das Textfeld ändert (dh einige Daten über Ajax abrufen). Ich habe nach der gleichen Funktionalität gesucht. Ich weiß, dass die Verwendung einer globalen Lösung nicht die robusteste oder eleganteste Lösung ist, aber genau das habe ich gewählt. Hier ist ein Beispiel:

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

Hierbei ist zu beachten, dass ich setTimeout und nicht setInterval verwende, da ich nicht mehrere Anforderungen gleichzeitig senden möchte. Dies stellt sicher, dass der Timer "stoppt", wenn das Formular gesendet wird, und "startet", wenn die Anforderung abgeschlossen ist. Dazu rufe ich checkSearchChanged auf, wenn mein Ajax-Aufruf abgeschlossen ist. Natürlich können Sie dies erweitern, um die Mindestlänge usw. zu überprüfen.

In meinem Fall verwende ich ASP.Net MVC, sodass Sie im folgenden Beitrag sehen können, wie Sie dies auch mit MVC Ajax verknüpfen können:

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

Ich würde empfehlen, einen Blick auf das Widget für die automatische Vervollständigung der jQuery-Benutzeroberfläche zu werfen. Sie haben die meisten Fälle dort bearbeitet, da ihre Codebasis ausgereifter ist als die der meisten anderen.

Unten finden Sie einen Link zu einer Demoseite, auf der Sie überprüfen können, ob sie funktioniert. http://jqueryui.com/demos/autocomplete/#default

Sie werden den größten Nutzen daraus ziehen, die Quelle zu lesen und zu sehen, wie sie sie gelöst haben. Sie finden es hier: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .

Im Grunde machen sie alles, an das sie sich binden input, keydown, keyup, keypress, focus and blur. Dann haben sie spezielle Handhabung für alle Arten von Schlüsseln wie page up, page down, up arrow key and down arrow key. Ein Timer wird verwendet, bevor der Inhalt des Textfelds abgerufen wird. Wenn ein Benutzer eine Taste eingibt, die keinem Befehl entspricht (Aufwärts-Taste, Abwärts-Taste usw.), gibt es einen Timer, der den Inhalt nach etwa 300 Millisekunden untersucht. Im Code sieht es so aus:

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

Der Grund für die Verwendung eines Timers besteht darin, dass die Benutzeroberfläche aktualisiert werden kann. Wenn Javascript ausgeführt wird, kann die Benutzeroberfläche nicht aktualisiert werden, daher der Aufruf der Verzögerungsfunktion. Dies funktioniert gut in anderen Situationen, z. B. wenn Sie sich auf das Textfeld konzentrieren (das von diesem Code verwendet wird).

Sie können also entweder das Widget verwenden oder den Code in Ihr eigenes Widget kopieren, wenn Sie nicht die jQuery-Benutzeroberfläche verwenden (oder in meinem Fall ein benutzerdefiniertes Widget entwickeln).

Ich möchte fragen, warum Sie versuchen zu erkennen, wann sich der Inhalt des Textfelds in Echtzeit geändert hat .

Eine Alternative wäre, einen Timer (über setIntval?) Einzustellen und den zuletzt gespeicherten Wert mit dem aktuellen zu vergleichen und dann einen Timer zurückzusetzen. Dies würde garantieren, dass JEDE Änderung erfasst wird, sei es durch Tasten, Maus, ein anderes Eingabegerät, das Sie nicht in Betracht gezogen haben, oder sogar durch JavaScript, das den Wert (eine andere Möglichkeit, die niemand erwähnt hat) von einem anderen Teil der App aus ändert.

Ziehen Sie in Betracht, ein Änderungsereignis zu verwenden ?

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

Verwenden Sie das textchangeEreignis über einen benutzerdefinierten jQuery-Shim, um die Cross-Browser- inputKompatibilität zu gewährleisten. http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (zuletzt gegabelter Github: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )

Dies behandelt alle Eingabe-Tags einschließlich <textarea>content</textarea>, was nicht immer mit change keyupusw. funktioniert . (!) Nur jQuery on("input propertychange")behandelt <textarea>Tags konsistent, und das oben Genannte ist ein Shim für alle Browser, die das inputEreignis nicht verstehen .

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

Dies behandelt auch das Einfügen, Löschen und dupliziert den Aufwand beim Keyup nicht.

Wenn Sie kein Shim verwenden, verwenden Sie jQuery- on("input propertychange")Ereignisse.

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

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

Es gibt ein komplettes Arbeits Beispiel hier .

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

So etwas sollte funktionieren, hauptsächlich weil focusund focusoutam Ende zwei separate Werte vorliegen würden. Ich verwende es datahier, weil es Werte im Element speichert, aber das DOM nicht berührt. Es ist auch eine einfache Möglichkeit, den mit seinem Element verbundenen Wert zu speichern. Sie können genauso gut eine Variable mit höherem Gültigkeitsbereich verwenden.

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

Dieser Code erkennt, wann immer sich der Inhalt eines Textfelds vom Benutzer geändert und durch Javascript-Code geändert hat.

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