jQuery addClass example

Change class name on click in jQuery

by therichpost

HTML

<div id="banner-message">
  <input class="form-control txtboxToFilterNumbers" type="text"  minlength="10" maxlength="13" placeholder="+777777777777">
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

.txtboxToFilterNumbers {
  background: #fff;
  border:1px solid #0084ff;
  padding: 8px 14px;
  font-size: 15px;
  color: #0084ff;
}

JavaScript

$(document).on('keydown keyup','.txtboxToFilterNumbers',function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
           // Allow: Ctrl+A, Command+A
          (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
           // Allow: home, end, left, right, down, up
          (e.keyCode >= 35 && e.keyCode <= 40)
           // Allow: Plus for mobile no
           || (e.keyCode == 187) || (e.keyCode == 107)
          ) {
            // let it happen, don't do anything
            return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
          e.preventDefault();
        }
      });