Scribd
Upload
6 views1 page

Validate Input

Uploaded by

juliomb.1694
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views1 page

Validate Input

Uploaded by

juliomb.1694
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

<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>

// 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); });

You might also like