Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript input filter showcase
<!-- https://jsfiddle.net/user/emkey08 -->
<!-- https://jsfiddle.net/emkey08/zgvtjc51 -->
<h2>JavaScript input filter showcase</h2>
<p>Supports Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the caret position, different keyboard layouts, and <a href="https://caniuse.com/#feat=input-event" target="_blank">all browsers since IE 9</a>.</p>
<p>There is also a <a href="https://jsfiddle.net/emkey08/tvx5e7q3" target="_blank">jQuery version</a> of this.</p>
<table>
<tr><td>Integer</td><td><input id="intTextBox"></td></tr>
<tr><td>Integer &gt;= 0</td><td><input id="uintTextBox"></td></tr>
<tr><td>Integer &gt;= 0 and &lt;= 500</td><td><input id="intLimitTextBox"></td></tr>
<tr><td>Float (use . or , as decimal separator)</td><td><input id="floatTextBox"></td></tr>
<tr><td>Currency (at most two decimal places)</td><td><input id="currencyTextBox"></td></tr>
<tr><td>A-Z only</td><td><input id="latinTextBox"></td></tr>
<tr><td>Hexadecimal</td><td><input id="hexTextBox"></td></tr>
</table>
<script>
// Restricts input for the given textbox 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 = "";
}
});
});
}
// Install input filters.
setInputFilter(document.getElementById("intTextBox"), function(value) {
return /^-?\d*$/.test(value); });
setInputFilter(document.getElementById("uintTextBox"), function(value) {
return /^\d*$/.test(value); });
setInputFilter(document.getElementById("intLimitTextBox"), function(value) {
return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500); });
setInputFilter(document.getElementById("floatTextBox"), function(value) {
return /^-?\d*[.,]?\d*$/.test(value); });
setInputFilter(document.getElementById("currencyTextBox"), function(value) {
return /^-?\d*[.,]?\d{0,2}$/.test(value); });
setInputFilter(document.getElementById("latinTextBox"), function(value) {
return /^[a-z]*$/i.test(value); });
setInputFilter(document.getElementById("hexTextBox"), function(value) {
return /^[0-9a-f]*$/i.test(value); });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment