Holen Sie sich den endgültigen Text eines Textfelds bei "Tastendruck", wenn das Klickereignis durchgehen darf

Ich möchte verhindern können, dass ein Benutzer Zeichen in ein Textfeld eingibt, basierend auf dem Text des Textfelds, wenn das Zeichen eingegeben wird.

Der erste Gedanke ist, so etwas zu tun:

<input type="text" id="test" />
document.getElementById("test").addEventListener("keypress", (e) => {
 // Get the current text
 const currentText = e.target.value;
 // Get the new char entered by the user
 const newChar = String.fromCharCode(e.keyCode);
 // The problem is that we don't know where the cursor is, 
 // i.e. we CANNOT guarantee that the new text will be:
 const newText = `${currentText}${newChar}`;
 
 //...because that assumes the cursor is at the end of the current text
 // I want to check that newText is valid before allowing the event to go through
 if(!someCustomCheck(newText)) {
 e.preventDefault();
 }
});

Die Kommentare erklären mein Problem, aber hier ist ein weiteres Beispiel: Stellen Sie sich vor, wir haben eine Eingabe, mit der Zahlen mit 2 Dezimalstellen hinzugefügt werden können:

• Wir haben ein leeres Eingabefeld


• Wir tippen 1hinein; das ist gültig, also erlauben wir es


• Wir tippen .hinein, was wiederum gilt, dann 2und3


• Dies gibt uns ein Textfeld mit1.23


• Der Benutzer tippt dann 4:
  
  
  
  • Das Problem ist, dass dies 4sein könnte 1.234, was ungültig wäre, aber es könnte auch oder41.23 sein 14.23, was gültig wäre
  
  
  
  

Ich sehe keine Möglichkeit, die Cursorposition im eventClick-Ereignis zu erhalten, und ich kann auch keine Eigenschaft e.target(wie Sie es im keyupEreignis können) sehen, die den endgültigen Text der Eingabe angibt.

Gibt es eine Möglichkeit, dies zu tun?

Lösung des Problems

Die Antwort für zukünftige Leser ist die Verwendung von e.target.selectionStart. Auf diese Weise können Sie herausfinden, wo der Benutzer die Taste gedrückt hat, und Sie können aufbauen, wie die letzte Zeichenfolge aussehen würde, wenn die Eingabe zulässig ist.

const newChar = String.fromCharCode(e.keyCode);
const cursorPos = e.target.selectionStart;
const inputText = e.target.value;
const proposedNewText = `${inputText.slice(0, cursorPos)}${newChar}${inputText.slice(cursorPos, inputText.length)}`;

Es ist erwähnenswert, dass dies komplizierter werden kann, wenn der Benutzer einen Textbereich ausgewählt hat (dh ein Textfeld mit 5 Zeichen darin und der Benutzer klickt und zieht, um das 2. -> 5. Zeichen auszuwählen) und dann tippt. In diesem Fall müssen Sie sowohl die Start- als auch die Endposition des Cursors ( e.target.selectionStartund e.target.selectionEnd) und .splice()die Zeichenfolge abrufen und das neue Zeichen des Benutzers hinzufügen.

e.target.value = newTextSie haben dann das Problem, dass der Cursor automatisch an das Ende des Textes springt, wenn Sie den Wert der Eingabe ändern (mit ). Je nach Anwendungsfall gibt es viel zu beachten.

Hoffentlich hilft dies jemandem in die richtige Richtung.