input поле только для цифр html

397
10 февраля 2017, 02:34

Есть поле <input class="ss" type="text"> Вешаю на него событие:

$(".ss").keyup(function(e){
  this.value = this.value.replace(/[^0-9\.]/g, '');
});

В итоге при вводе буквы её видно на мгновение, а потом она убирается. Как сделать чтобы её не было видно? Так же ещё и «.» надо.

Answer 1

Всё, что вам нужно это:

<input type="number">

В случае, если вдруг это не подходит, ответ на eng.SO. Мне больше всего понравился вариант:

<input type='text' onkeypress='validate(event)' />

And this script:

function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}
Answer 2

К сожалению не могу писать комментарии, так что напишу тут. Если используете jquery, почему не заюзать маску на поле? jQuery Mask

Answer 3

Можно просто запретить ввод ненужных символов - например, только цифры и точки:

$(".ss").keypress(function(event){ 
  event = event || window.event; 
  if (event.charCode && event.charCode!=0 && event.charCode!=46 && (event.charCode < 48 || event.charCode > 57) ) 
    return false; 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input class="ss" type="text">

Answer 4

$('input').on('keydown', function(e){ 
  if(e.key.length == 1 && e.key.match(/[^0-9'".]/)){ 
    return false; 
  }; 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input/>

READ ALSO
Как выводить объекты Queryset&#39;а по одному?

Как выводить объекты Queryset'а по одному?

Идея такая: фильтром выбрать из базы несколько элементов (вопросов к тесту)Далее надо выводить эти элементы по одному

282
Определить верные координаты при клике SIGMA.JS

Определить верные координаты при клике SIGMA.JS

ЗдравствуйМне при клике на граф sigma

298
overflow и высота блока в %

overflow и высота блока в %

столкнулся с проблемой, в общем на сайте в body должен быть отключен скролл, а у левого блока он должен присутствовать, все работает, но только...

362
Адаптивная верстка: меню

Адаптивная верстка: меню

В моем шаблоне есть горизонтальное меню - обычное ul с ссылкамиИспользую фреймворк Skeleton, поэтому шаблон адаптивный

273