How can I make an "input" that allows you to enter only vowel letters? Copying, dragging text into the input field should also be filtered.
<div class="field">
<input class="field_word" type="text">
</div>
const field = document.querySelector('.field');
const fieldWord = document.querySelector('.field_word');
fieldWord.onkeypress = (event) => {
if ((event.keyCode > 48) || (event.keyCode < 90)) {
event.preventDefault();
You can use the function below to filter your input to a certain set of characters:
// Restricts input for the given textbox element to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
textbox.addEventListener(event, function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
this.value = "";
}
});
});
}
// Example USE: Install input filters.
setInputFilter(document.getElementById("vowelTextbox"), function(value) {
return /^[aioueAIOUE]*$/i.test(value);
});<h2>JS input filter vowels</h2>
<p>
Supports Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations,
non-typeable keys, the caret position, different keyboard layouts,
and all browsers since IE 9
</p>
<input id="vowelTextbox">NOTE: Snippet taken and edited from this JSFiddle