Ввод текста HTML допускает только числовой ввод - PullRequest
Новая
       147

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

729 голосов
/ 22 января 2009

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

Ответы [ 60 ]

2 голосов
/ 22 января 2009

Вы можете прикрепить к событию нажатия клавиши, а затем отфильтровать ключи в соответствии с тем, что вам нужно, например: 

<input id="FIELD_ID" name="FIELD_ID" onkeypress="return validateNUM(event,this);"  type="text">

А настоящий обработчик JavaScript будет: 

function validateNUM(e,field)
{
    var key = getKeyEvent(e)
    if (specialKey(key)) return true;
    if ((key >= 48 && key <= 57) || (key == 46)){
        if (key != 46)
            return true;
        else{
            if (field.value.search(/\./) == -1 && field.value.length > 0)
                return true;
            else
                return false;
        }
    }

function getKeyEvent(e){
    var keynum
    var keychar
    var numcheck
    if(window.event) // IE
        keynum = e.keyCode
    else if(e.which) // Netscape/Firefox/Opera
        keynum = e.which
    return keynum;
}
1 голос
/ 17 июня 2014 
function digitsOnly(obj) {
   obj.value = obj.value.replace(/\D/g, "");
}

и в элементе 

<input type="text" onkeyup="digitsOnly(this);" />
1 голос
/ 13 октября 2015

Я искал способ заблокировать ввод чисел, тогда, поскольку я не нашел его в ответах, этот код работал нормально для меня.

Мне просто нужно ввести его в событие onkeypress.

Если вам нужно просто заблокировать ввод чисел, я думаю, это будет работать нормально. 

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
1 голос
/ 18 октября 2012

Это мгновенно удаляет любого плохого персонажа, допускает только одну точку, является коротким, и позволяет возврат на одну позицию и т. Д.: 

$('.numberInput').keyup(function () {
    s=$(this).val();
    if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));
});
1 голос
/ 03 сентября 2012

Я немного его подправил, но ему нужно гораздо больше работы, чтобы соответствовать странному подходу JavaScript. 

function validateNumber(myEvent,decimal) {
    var e = myEvent || window.event;
    var key = e.keyCode || e.which;

    if (e.shiftKey) {
    } else if (e.altKey) {
    } else if (e.ctrlKey) {
    } else if (key === 48) { // 0
    } else if (key === 49) { // 1
    } else if (key === 50) { // 2
    } else if (key === 51) { // 3
    } else if (key === 52) { // 4
    } else if (key === 53) { // 5
    } else if (key === 54) { // 6
    } else if (key === 55) { // 7
    } else if (key === 56) { // 8
    } else if (key === 57) { // 9

    } else if (key === 96) { // Numeric keypad 0
    } else if (key === 97) { // Numeric keypad 1
    } else if (key === 98) { // Numeric keypad 2
    } else if (key === 99) { // Numeric keypad 3
    } else if (key === 100) { // Numeric keypad 4
    } else if (key === 101) { // Numeric keypad 5
    } else if (key === 102) { // Numeric keypad 6
    } else if (key === 103) { // Numeric keypad 7
    } else if (key === 104) { // Numeric keypad 8
    } else if (key === 105) { // Numeric keypad 9

    } else if (key === 8) { // Backspace
    } else if (key === 9) { // Tab
    } else if (key === 13) { // Enter
    } else if (key === 35) { // Home
    } else if (key === 36) { // End
    } else if (key === 37) { // Left Arrow
    } else if (key === 39) { // Right Arrow
    } else if (key === 190 && decimal) { // decimal
    } else if (key === 110 && decimal) { // period on keypad
    // } else if (key === 188) { // comma
    } else if (key === 109) { // minus
    } else if (key === 46) { // Del
    } else if (key === 45) { // Ins
    } else {
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

А потом он вызывается через: 

$('input[name=Price]').keydown(function(myEvent) {
    validateNumber(myEvent,true);
});
1 голос
/ 26 августа 2014

Да, HTML5 делает. Попробуйте этот код ( w3school ): 

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>
1 голос
/ 02 июля 2015

Для тех из вас, кто любит однострочник . 

string.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

Я использую этот код для ввода type = "text" и с AngularJS для активации при нажатии клавиш, но вы можете использовать jQuery, если хотите. Просто поместите этот код в функцию, которая каким-то образом активируется при нажатии клавиши.

Это позволяет только цифры, цифры + десятичные, цифры + десятичные + цифры.

КОД 

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d{0,2})(.*)/, '$1');

testOne = "kjlsgjkl983724658.346.326.326..36.346"
=> "983724658.34";

testTwo = ".....346...3246..364.3.64.2346......"
=> "346.";

testThree = "slfdkjghsf)_(*(&^&*%^&%$%$%^KJHKJHKJKJH3"
=> "3";

testFour = "622632463.23464236326324363"
=> "622632463.23";

Это было построено для валюты США, но его можно изменить, чтобы разрешить более двух десятичных знаков после первого десятичного знака, как показано ниже ...

ИЗМЕНЕННЫЙ КОД 

YourString.replace(/[^\d\.]/g, '').replace(/^\.*/, '').replace(/(\.\d*)(.*)/, '$1');

testFour = "dfskj345346346.36424362jglkjsg....."
=> "345346346.36424362";

:)

1 голос
/ 04 октября 2012

Еще один простой способ с jQuery: 

$('.Numeric').bind('keydown',function(e){
    if (e.which < 48 || e.which > 57)
        return false;
    return true;
})

Теперь просто установите для каждого класса ввода значение Numeric, например: 

<input type="text" id="inp2" name="inp2" class='Numeric' />
1 голос
/ 11 апреля 2019

Я видел несколько отличных ответов, однако они мне нравятся как можно меньше и проще, поэтому, возможно, кому-то это будет полезно. Я хотел бы использовать javascript Number() и isNaN функциональность, как это: 

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Надеюсь, это поможет.

0 голосов
/ 22 мая 2019

Я закончил использовать эту функцию: 

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) return false;"

Это хорошо работает в IE и Chrome, я не знаю, почему это не так хорошо работает и в Firefox, эта функция блокирует клавишу табуляции в Firefox.

Чтобы клавиша Tab работала нормально в Firefox, добавьте: 

onkeypress="if(event.which &lt; 48 || event.which &gt; 57 ) if(event.which != 8) if(e.keyCode != 9) return false;"
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...