Input filter showcase

Text input filters with jQuery.

by Sergey Linnick

HTML

<input onkeyup="Payments.LimitNumberLength(this)" type="tel" id="">

<input onkeyup="" type="tel" id="intTextBox">

JavaScript

// Restricts input for each element in the set of matched elements to the given inputFilter.
(function($) {
  $.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));


$("#intLimitTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 12); });
$("#intTextBox").inputFilter(function(value) {
  return /^-?\d*$/.test(value); });

var Payments = new function () {
	this.LimitNumberLength = function(el) {
   return /^-?\d*$/.test(el.value);
  }
}