Ввод текста HTML допускает только числовой ввод

Question

Есть ли быстрый способ настроить ввод текста HTML (<input type=text />), чтобы разрешить только цифровые нажатия клавиш (плюс '.')?

Answer 1

Так просто ....

// В функции JavaScript (можно использовать HTML или PHP).

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

В вашей форме введите:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

с входом макс. (Это выше позволяет 12-значный номер)

Answer 2

2 решения:

Используйте средство проверки формы (например, с плагином проверки jQuery )

Выполните проверку во время события onblur (т.е. когда пользователь покидает поле) в поле ввода с помощью регулярного выражения:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Answer 3

Более безопасный подход заключается в проверке значения ввода, а не в перехвате нажатий клавиш и попытке фильтрации кодов клавиш.

Таким образом, пользователь может свободно использовать стрелки на клавиатуре, клавиши-модификаторы, клавишу Backspace, удалять, использовать нестандартные клавиши клавиатуры, использовать мышь для вставки, использовать перетаскивание текста и даже использовать специальные возможности.

В приведенном ниже скрипте допускаются положительные и отрицательные числа

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

РЕДАКТИРОВАТЬ: я удалил свой старый ответ, потому что я думаю, что он устарел.

Answer 4

Пожалуйста, найдите нижеупомянутое решение. При этом пользователь может иметь возможность вводить только значение numeric, также пользователь не может иметь возможность ввода copy, paste, drag и drop.

Допустимые символы

0,1,2,3,4,5,6,7,8,9

Не допускаются Персонажи и Персонажи через события

• Буквенное значение
• Специальные символы
• Copy
• Вставить
• Drag
• Капля

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Дайте мне знать, если это не сработает.

Answer 5

Вы можете использовать шаблон для этого:

<input id="numbers" pattern="[0-9.]+" type="number">

Здесь вы можете ознакомиться с полным советом по интерфейсу мобильного веб-сайта .

Answer 6

Если вы хотите предложить устройству (возможно, мобильному телефону) между алфавитным или цифровым, вы можете использовать <input type="number">.

Answer 7

код JavaScript:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        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();
            }
        }
    }

HTML код:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

отлично работает, потому что код клавиши возврата равен 8, а выражение регулярного выражения этого не позволяет, поэтому это простой способ обойти ошибку:)

Answer 8

Короткая и приятная реализация, использующая jQuery и replace () вместо просмотра event.keyCode или event.which:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Единственный небольшой побочный эффект, что набранная буква появляется на мгновение, а CTRL / CMD + A ведет себя немного странно.

Answer 9

input type="number" является атрибутом HTML5.

В другом случае это поможет вам:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Answer 10

Просто другой вариант с jQuery, использующим

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});