Reines Javascript hört auf die Änderung des Eingabewerts

Lesezeit: 3 Minuten

Benutzer-Avatar
gespinha

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

Ich suche nach etwas, das reines Javascript verwendet, keine Plugins, keine Frameworks und ich kann den HTML-Code nicht bearbeiten.

Etwas, zum Beispiel:

Wenn ich den Wert in der Eingabe ändere MyObjectdiese Funktion wird ausgeführt.

Irgendeine Hilfe?

Das ist was Veranstaltungen sind für.

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

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

    – ImShogun

    24. Mai 2017 um 12:37 Uhr


  • Beachten Sie, dass typeof this.value ist string. Wenn eine Zahl benötigt wird, wandeln Sie sie mit um parseInt oder parseFloat.

    – Akseli Palén

    13. November 2019 um 18:53 Uhr


  • In Fortsetzung der Bemerkung von @ImShogun. Sehen Sie sich die Antwort von Azune-NK an, um zu sehen, wie das Ereignis von JavaScript ausgelöst wird, wenn Sie den Wert dort ändern. Super hilfreich.

    – s3c

    29. April 2021 um 9:18 Uhr


  • @ImShogun Diese Antwort scheint in der Lage zu sein, Eigenschaften von Elementen wie value zu beobachten: stackoverflow.com/a/61975440/1764521

    – Damien Golding

    11. Juni 2021 um 9:36 Uhr

  • ich benutzte window.addEventListener('input', function (evt) { if() {} })

    – Eduardo Leffa Abrantes

    1. April um 13:51 Uhr

Benutzer-Avatar
Niffler

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/

  • Würde nicht funktionieren, wenn der Eingabeinhalt durch Javascript geändert wird. weder mit ‘input’ noch ‘change’ event.

    – ImShogun

    24. Mai 2017 um 12:37 Uhr

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

    – null_cool

    6. März 2019 um 23:17 Uhr

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

    – Torx

    2. Oktober 2019 um 14:56 Uhr

  • @ImShogun irgendwelche Ideen, wie der Fall “unterstützt” werden kann, wenn die Eingabe über JS geändert wird?

    – Alessio

    13. November 2020 um 10:04 Uhr

  • @ImShogun Diese Antwort scheint in der Lage zu sein, Eigenschaften von Elementen wie value zu beobachten: stackoverflow.com/a/61975440/1764521

    – Damien Golding

    11. Juni 2021 um 9:35 Uhr


Benutzer-Avatar
AmerllicA

Eigentlich ist die angekreuzte Antwort genau richtig, aber die Antwort kann drin sein ES6 Form:

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

Oder kann wie folgt geschrieben werden:

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

  • Du hast ersetzt function(evt) mit (evt) => — Bietet dies einen Mehrwert oder eine Funktionalität?

    – Mike32

    10. Juni um 15:25 Uhr

Benutzer-Avatar
Azune-NK

Standardnutzung

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

Aberwenn Sie ein Ereignis auslösen möchten, wenn Sie den Eingabewert manuell über JS ändern, sollten Sie ein benutzerdefiniertes Ereignis verwenden (beliebiger Name, wie ‘myEvent’ \ ‘ev’ usw.). Sie ändern den Eingabewert über JS – Sie können Ihr benutzerdefiniertes Ereignis “Änderung” \ “Eingabe” nennen und es wird auch funktionieren.

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


el.value="something";
el.dispatchEvent(event);

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

Benutzer-Avatar
Runsis

Ein weiterer Ansatz im Jahr 2021 könnte sein document.querySelector():

const myInput = document.querySelector('input[name="exampleInput"]');

myInput.addEventListener("change", (e) => {
  // here we do something
});

  • @customcommander Danke für das Feedback. Antwort bearbeitet!

    – Runsis

    20. November 2020 um 0:25 Uhr

Benutzer-Avatar
Benutzername Name

Jedes Mal, wenn ein Benutzer einen Wert eingibt, tun Sie etwas.

var element = document.getElementById('input');
element.addEventListener('input', function() {
 // Do something 
});

  • @customcommander Danke für das Feedback. Antwort bearbeitet!

    – Runsis

    20. November 2020 um 0:25 Uhr

Benutzer-Avatar
Mitesh vaghela

Keydown, keyup, input sind Ereignisse, die sofort ausgelöst werden, wenn sich die Eingabe ändert. Ich würde keydown- oder input-Ereignisse verwenden, um den geänderten Wert aus dem Eingabefeld zu erhalten.

const myObject = document.getElementById('Your_element_id');
myObject.addEventListener('keydown', function (evt) {
// your code goes here 
 console.log(myObject.value);
});

1018190cookie-checkReines Javascript hört auf die Änderung des Eingabewerts

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy