Input type Number maxLength

by Faisal Khan Janjua

HTML

<input type="number" placeholder="X" class="numbersOnly dig1" required />
<input type="number" placeholder="XXXXXX" class="numbersOnly dig6" required />
<input type="number" placeholder="XXXXXXXXX" class="numbersOnly dig9" required />

<button id="dig1">Dig 1</button>
<button id="dig6">Dig 6</button>
<button id="dig9">Dig 9</button>

<p>dasudui 123456789000 sd89s*/98ds98d dasd+232130 dasd-232130</p>

<h3></h3>

SCSS

input {
  border:none;
  outline:none;
  border-bottom: 2px solid #000;
}

JavaScript

jQuery(document).on('keypress', '.numbersOnly', function (e) {
  if(e.key=="-"||e.key=="+"||e.key=="."){
    return false;
  }
});
jQuery(document).on('input', 'input', function () {
  jQuery('h3').html(this.value);
});

jQuery(document).on('input', '.dig1', function () {
  this.value = this.value.substring(0, 1);
});
jQuery(document).on('input', '.dig6', function () {
  this.value = this.value.substring(0, 6);
});
jQuery(document).on('input', '.dig9', function () {
  this.value = this.value.substring(0, 9);
});


jQuery(document).on('click', '#dig1', function(){
	alert(jQuery('.dig1').val());
});
jQuery(document).on('click', '#dig6', function(){
	alert(jQuery('.dig6').val());
});
jQuery(document).on('click', '#dig9', function(){
	alert(jQuery('.dig9').val());
});