Input filter showcase

Text input filters with jQuery.

by Shree Khanal

HTML

<table>
  <tr><td>Integer</td><td><input class="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>

JavaScript

(function($) {
  $('table').append(`<tr><td>Integer1</td><td><input class="intTextBox"></td></tr>`);
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", 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 = "";
      }
    });
  };
}(jQuery));


// Install input filters.
$(".intTextBox").inputFilter(function(value) {
  return /^-?\d*$/.test(value);
});
$("#uintTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value);
});
$("#intLimitTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500);
});
$("#floatTextBox").inputFilter(function(value) {
  return /^-?\d*[.,]?\d*$/.test(value);
});
$("#currencyTextBox").inputFilter(function(value) {
  return /^-?\d*[.,]?\d{0,2}$/.test(value);
});
$("#latinTextBox").inputFilter(function(value) {
  return /^[a-z]*$/i.test(value);
});
$("#hexTextBox").inputFilter(function(value) {
  return /^[0-9a-f]*$/i.test(value);
});