Ich habe eine input mit google autoComplete in Verbindung gebracht.
Wenn sich der Benutzer durch die auf und ab bewegt seachResultsder Wert der Eingabe wird dynamisch über JavaScript geändert.
Ich möchte den Wert erfassen, der zu einem bestimmten Zeitpunkt in der Eingabe ist.
ich habe es versucht onChange und onInput aber da wird kein ereignis gefeuert, und das value des DOM Node wird nicht eingestellt – es gibt keine Updates.
Wie erkennen Sie Änderungen an der input die dynamisch aktualisiert werden über JavaScript?
Das .value Attribut ändert sich erst, wenn der Drehbuchautor angerufen hat setAttribute('value' um den neuen Wert festzulegen, was ziemlich seltsam ist. In fast allen Situationen würde ich erwarten, dass der Wert durch Zuweisung an gesetzt wird value Eigenschaft direkt, zB:
input.value="foo";
Berufung setAttribute wird in der Tat eine Änderung im inspizierten DOM anzeigen Attributz.B:
<input value="somevalue">
const input = document.querySelector('input');
input.setAttribute('value', 'foo');
console.log(input.outerHTML);
<input>
Aber nur die Zuordnung zu .value Eigentum des Elements führt nicht zu einer solchen Änderung:
const input = document.querySelector('input');
input.value="foo";
console.log(input.outerHTML);
<input>
Zuweisung an die .value ruft eigentlich a auf Setter-Funktion An HTMLInputElement.prototype:
console.log(HTMLInputElement.prototype.hasOwnProperty('value'));
Sie können Schatten dies durch Setzen eines Getter/Setter für value direkt auf dem Element selbst, wobei der Setter Ihre eigene Funktion aufruft, sodass Sie auf Änderungen lauschen können:
const { get, set } = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const input = document.querySelector('input');
Object.defineProperty(input, 'value', {
get() {
return get.call(this);
},
set(newVal) {
console.log('New value assigned to input: ' + newVal);
return set.call(this, newVal);
}
});
// example of autocomplete trying to change the input value:
input.value="foo";
<input>
Erwägen Sie das Erstellen und Auslösen von Eingabeereignissen
var event = new Event('input', {
bubbles: true,
cancelable: true,
});
dann
myelement.dispatchEvent(event);
Mehr Info
10057200cookie-checkWie hören / erkennen Sie Änderungen an einem Eingabewert – wenn der Eingabewert über Javascript geändert wird?yes
the value of the DOM Node is not getting setMoment, wird der Wert per Javascript geändert oder nicht? Der Titel impliziert, dass dies der Fall ist, aber diese Zeile dort impliziert, dass dies nicht der Fall ist?– Bestimmte Leistung
6. März 2019 um 23:33 Uhr
Machen Sie keinen Fehler – der Wert der Eingabe ändert sich – ich glaube über Google – aber das Wertattribut wird nicht aktualisiert, es sei denn, ein Ereignis wird ausgelöst. Wenn beispielsweise onBlur oder onClick ausgelöst wird, wird das Wertattribut aktualisiert, aber wenn die Ergebnisse über Google AutoComplete geändert werden, nicht.
– null_cool
6. März 2019 um 23:34 Uhr
Der Wert Attribut sollte sich nicht ändern, obwohl der Wert Eigentum sollen. Wie stellen Sie fest, dass es nicht aktualisiert wird, hören Sie nur auf ein Ereignis und sehen kein Ereignis, das den Listener auslöst? Ein Live-Snippet (oder ein Link), der das Verhalten veranschaulicht, würde die Dinge wahrscheinlich erheblich aufklären
– Bestimmte Leistung
6. März 2019 um 23:35 Uhr
Kartoffel? Kartoffel? Was meinst du mit Eigentum? Der DOM-Knoten der Eingabe hat ein Wertattribut. Wenn ich das DOM mit dem Browser-Inspektor beobachte, ändert sich der Wert nicht, es sei denn, ein Ereignis wird ausgelöst.
– null_cool
6. März 2019 um 23:37 Uhr