Pure Javascript hört auf die Änderung des Eingabewerts

92

Gibt es eine Möglichkeit, eine konstante Funktion zu erstellen, die auf eine Eingabe hört. Wenn sich dieser Eingabewert ändert, wird sofort etwas ausgelöst?

Ich suche etwas mit reinem Javascript, keinen Plugins, keinen Frameworks und kann den HTML-Code nicht bearbeiten.

Etwas zum Beispiel:

Wenn ich den Wert in der Eingabe ändere MyObject, wird diese Funktion ausgeführt.

Irgendeine Hilfe?

javascript

— gespinha gespinha
quelle

118

Dafür sind Events da .

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});

— QUentin
quelle

18

Würde nicht funktionieren, wenn der Eingabewert durch Javascript geändert wird

— ImShogun

1

Beachten Sie das typeof this.valueist string. Wenn eine Nummer benötigt wird, konvertieren Sie sie mit parseInt oder parseFloat .

— Akseli Palén

32

Als grundlegendes Beispiel ...

HTML:

<input type="text" name="Thing" value="" />

Skript:

/* event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);

/* function */
function doThing(){
   alert('Horray! Someone wrote "' + this.value + '"!');
}

Hier ist eine Geige: http://jsfiddle.net/Niffler/514gg4tk/

— Niffler
quelle

9

Funktioniert nicht, wenn der Eingabeinhalt durch Javascript geändert wird. weder mit 'input' noch mit 'change' event.

— ImShogun

9

Welches Ereignis können Sie hören, wenn der Wert durch Javascript geändert wird?

— zero_cool

2

Und wie die anderen betonten, wird es auch erst ausgelöst, wenn Sie das Eingabefeld verlassen. Alte Antwort inzwischen, ich weiß. Aber diese Antworten tauchen überraschend oft auf und erwähnen nie die Einschränkungen.

— Torxed

7

Eigentlich ist die angekreuzte Antwort genau richtig, aber die Antwort kann in ES6Form sein:

HTMLInputElementObject.oninput = () => {
  console.log('run'); // Do something
}

Oder kann wie folgt geschrieben werden:

HTMLInputElementObject.addEventListener('input', (evt) => {
  console.log('run'); // Do something
});

— AmerllicA
quelle

1

Standardverwendung

el.addEventListener('input', function () {
    fn();
});

Aber , wenn Sie Feuer Ereignis wünschen , wenn Sie Eingänge Wert manualy über JS ändern , sollten Sie benutzerdefinierte Ereignis verwenden ( einen beliebigen Namen, wie ‚myEvent‘ \ ‚ev‘ usw.) , wenn Sie brauchen , um Formen ‚Veränderung‘ zu hören oder ‚Input‘ Ereignis und Sie ändern den Eingabewert über JS - Sie können Ihr benutzerdefiniertes Ereignis 'change' \ 'input' nennen und es funktioniert auch.

var event = new Event('input');
el.addEventListener('input', function () { 
  fn();
});
form.addEventListener('input', function () { 
  anotherFn();
});


el.value = 'something';
el.dispatchEvent(input);

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

— Azune-NK
quelle

-6

Verwenden Sie anstelle von id title, um Ihr Element zu identifizieren, und schreiben Sie den Code wie folgt.

$(document).ready(()=>{

 $("input[title='MyObject']").change(()=>{
        console.log("Field has been changed...")
    })  
});

— kai
quelle

op forderte "reines Javascript" an, was bedeutet, dass kein jQuery - daher die Downvotes

— Uhr zurückgewiesen