Лучший способ ограничить текстовое поле только числами? - PullRequest
Новая
       48

Лучший способ ограничить текстовое поле только числами?

39 голосов
/ 22 сентября 2010

Я использую следующий Javascript, чтобы ограничить текстовое поле на моем сайте, чтобы принимать только числовой ввод, а не другие буквы или символы. Проблема в том, что он ДЕЙСТВИТЕЛЬНО отклоняет все другие ключевые вводы, такие как ctrl - A для выбора текста, или даже любые другие функции браузера, такие как ctrl - T или ctrl - W , когда выделено текстовое поле. Кто-нибудь знает лучший сценарий, позволяющий только вводить цифры, но не блокировать обычные команды (которые не вводятся напрямую в поле)? Спасибо Вот код, который я сейчас использую: 

function numbersonly(e, decimal) 
{
    var key;
    var keychar;

    if (window.event) 
        key = window.event.keyCode;
    else if (e) 
        key = e.which;
    else 
        return true;

    keychar = String.fromCharCode(key);

    if ((key==null) || (key==0) || (key==8) ||  (key==9) || (key==13) || (key==27))
       return true;     
    else if ((("0123456789").indexOf(keychar) > -1))
       return true;
    else if (decimal && (keychar == "."))
       return true;        
    else
       return false;
}

Редактировать: Ни одно из представленных решений не решило мою проблему с разрешением таких команд, как ctrl - A , когда выделено текстовое поле. В этом весь смысл моего вопроса, поэтому я вернулся к использованию своего оригинального сценария. Ну хорошо.

Ответы [ 28 ]

35 голосов
/ 22 сентября 2010

Это то, что я сделал в другой раз только для чисел, оно также разрешит все форматеры.

jQuery 

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!(a.indexOf(k)>=0))
        e.preventDefault();
});​

Попробуйте

http://jsfiddle.net/zpg8k/

Как примечание, вы захотите фильтровать также на стороне отправки / сервера, для вставки / контекстного меню и браузеров, которые не поддерживают событие вставки.

Изменить наподробнее о нескольких методах

Я вижу, что вы пытаетесь найти «принятый» ответ, поэтому я кое-что проясню.Вы действительно можете использовать любой из перечисленных здесь методов, все они работают.Что я лично сделаю, так это использую мою для живой фильтрации на стороне клиента, а затем на стороне отправки и на стороне сервера использую RegEx, как это предлагают другие.Однако никакая клиентская сторона сама по себе не будет на 100% эффективна , поскольку ничто не мешает мне поместить document.getElementById('theInput').value = 'Hey, letters.'; в консоль и обойти любую проверку на стороне клиента (за исключением опроса, но я мог бы просто отменить setInterval с консоли тоже).Используйте любое решение на стороне клиента, которое вам нравится, но убедитесь, что вы внедрили что-то и на стороне отправки, и на стороне сервера.

Редактировать 2 - @Tim Down

Хорошо, в соответствии с комментариями мне пришлось настроить двавещи, о которых я не думал.Во-первых, нажатие клавиши вместо keydown, которая была обновлена, но отсутствие indexOf в IE (серьезно Microsoft !?) также нарушает приведенный выше пример.Вот альтернатива 

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!($.inArray(k,a)>=0))
        e.preventDefault();
});​

Новый jsfiddle: http://jsfiddle.net/umNuB/

15 голосов
/ 15 апреля 2011 
     .keypress(function(e)
               {
                 var key_codes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8];

                 if (!($.inArray(e.which, key_codes) >= 0)) {
                   e.preventDefault();
                 }
               });

Вам также нужны клавиши Backspace и Delete;)

15 голосов
/ 12 марта 2014

Это работает в IE, Chrome и Firefox: 

<input type="text" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" />
11 голосов
/ 22 сентября 2010

http://jsfiddle.net/PgHFp/

<html>
<head>
<title>Test</title>
<script language="javascript">
function checkInput(ob) {
  var invalidChars = /[^0-9]/gi
  if(invalidChars.test(ob.value)) {
            ob.value = ob.value.replace(invalidChars,"");
      }
}
</script>
</head>

<body>
    <input type="text" onkeyup="checkInput(this)"/>
</body>
</html>
5 голосов
/ 22 сентября 2010

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

var numInput;
window.onload = function () {   
    numInput = document.getElementById('numonly');
    numInput.onkeydown = numInput.onblur = numInput.onkeyup = function()
    {
        numInput.value = numInput.value.replace(/[^0-9]+/,"");
    }
}
4 голосов
/ 12 октября 2012

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

<input type="text" data-mask="9999999">

Маска ввода

4 голосов
/ 22 сентября 2010

Единственное событие, которое содержит информацию о набранном символе, это keypress.Все, что связано с символами, вы можете сделать вывод из свойства keyCode событий keydown или keyup, ненадежно и зависит от конкретной раскладки клавиатуры.Следующее будет предотвращать ввод нецифровой клавиатуры во всех основных браузерах, используя символ, полученный из события keypress.Это не помешает пользователю вставлять или перетаскивать нечисловой текст в. 

var input = document.getElementById("your_input");

input.onkeypress = function(evt) {
    evt = evt || window.event;
    if (!evt.ctrlKey && !evt.metaKey && !evt.altKey) {
        var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which;
        if (charCode && !/\d/.test(String.fromCharCode(charCode))) {
            return false;
        }
    }
};
4 голосов
/ 21 января 2013

Я использую это: 

    oEl.keypress(function(ev)
    {
        var sKey = String.fromCharCode(ev.which);
        if (!sKey.match(/[0-9]/) || !sKey === "") 
            ev.preventDefault();            
    });

Преимущество состоит в том, что каждая клавиша, которая не обеспечивает ввод в поле, все еще разрешена, поэтому вам не нужно беспокоиться о каждой отдельной специальной клавише. Даже такие комбинации, как CTRL + R, все еще работают.

EDIT Поскольку это не работает в Firefox, мне пришлось немного изменить функцию: 

    oEl.keypress(function(ev)
    {
        var iKeyCode = ev.which || ev.keyCode;
        var aSpecialKeysForFirefox = [8, 9, 13, 27, 37, 38, 39, 40, 46];
        var sKey = String.fromCharCode(iKeyCode);
        if (sKey !== "" && $.inArray(iKeyCode, aSpecialKeysForFirefox ) < 0 && !sKey.match(/[0-9]/)) {
            ev.preventDefault();
        }
    });

Объяснение Все браузеры по-разному обрабатывают событие нажатия клавиши jquerys. Чтобы это работало в FF, добавлена ​​проверка $ .inArray. Так как событие нажатия клавиш в Firefox не запускается, когда используются такие комбинации, как strg + tab, но другие делают, подход key.match по-прежнему добавляет небольшое значение последнему, поскольку он разрешает эти комбинации.

3 голосов
/ 07 октября 2010

Следующий код - это то, что я широко использую.Я нашел сценарий на форуме, но изменил и расширил его в соответствии со своими потребностями: 

<script type="text/javascript">
    // Restrict user input in a text field
    // create as many regular expressions here as you need:
    var digitsOnly = /[1234567890]/g;
    var integerOnly = /[0-9\.]/g;
    var alphaOnly = /[A-Za-z]/g;
    var usernameOnly = /[0-9A-Za-z\._-]/g;

    function restrictInput(myfield, e, restrictionType, checkdot){
        if (!e) var e = window.event
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        var character = String.fromCharCode(code);

        // if user pressed esc... remove focus from field...
        if (code==27) { this.blur(); return false; }

        // ignore if the user presses other keys
        // strange because code: 39 is the down key AND ' key...
        // and DEL also equals .
        if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
            if (character.match(restrictionType)) {
                if(checkdot == "checkdot"){
                    return !isNaN(myfield.value.toString() + character);
                } else {
                    return true;
                }
            } else {
                return false;
            }
        }
    }
</script>

Различные методы использования будут: 

<!-- To accept only alphabets -->
<input type="text" onkeypress="return restrictInput(this, event, alphaOnly);">
<!-- To accept only numbers without dot -->
<input type="text" onkeypress="return restrictInput(this, event, digitsOnly);">
<!-- To accept only numbers and dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly);">
<!-- To accept only numbers and only one dot -->
<input type="text" onkeypress="return restrictInput(this, event, integerOnly, 'checkdot');">
<!-- To accept only characters for a username field -->
<input type="text" onkeypress="return restrictInput(this, event, usernameOnly);">
3 голосов
/ 15 ноября 2013

Добавить <script type="text/javascript" src="jquery.numeric.js"></script>, затем использовать 

 $("element").numeric({ decimal: false, negative: false });
Страница:
...