Javascript Keyboard Ereignis ändert markierten Text

Question

Ich habe ein Eingabefeld, das wie folgt aussieht:

<input type="text" name="definemonth" value="'.$monthStart.'" class="form-control" 
onkeypress="return isNumberKey(event, this.value);" /> 

Um nur Zahlen zwischen 1 und 28 zu erlauben (jeweils inklusive) Ich schrieb dieses pise von JS Code:

var input = event.key; 
var newValue = value + input; 

if(input == "ArrowLeft" || input == "ArrowRight" || input == "ArrowUp" || 
    input == "ArrowDown" || input == "Backspace" || input == "Delete" || input == "Enter") 
{ 
    return true; 
} 

if (!input.match("^[0-9]$") || newValue > 28 || newValue < 1) 
{ 
    return false; 
} 

return true; 

Es funktioniert meistens so, wie ich es will. Ich möchte in der Lage sein, die Pfeiltasten, die Rücktaste und die Löschtaste zu verwenden, die alles gut funktioniert. Aber das Problem ist, dass ich den Text nicht markieren und dann eine neue Nummer hinzufügen kann. Mit Markierung meine ich diese Art der Markierung: Die Markierung funktioniert gut, aber jeder Tastendruck ändert überhaupt nichts.

Ich habe versucht, mit

console.log(input); 

zu erkennen, was dort geschieht, aber ich jede Ausgabe in der Konsole überhaupt nicht bekommen.

Meine Frage ist dann wie muss ich meinen Code ändern, um einen neuen Wert eingeben zu können, wenn der Text markiert ist und ich zum Beispiel 1 eintippe.

Answer 1

Sie sollten den markierten Text löschen, bevor Sie den neuen Wert auf Zulässigkeit prüfen.

So:

var clearValue = element.value; 
clearValue = clearValue.slice(0, element.selectionStart) + clearValue.slice(element.selectionEnd); 

var newValue = clearValue + input; 

jsfiddle