jQuery: каков наилучший способ ограничить «числовой» ввод только для текстовых полей? (разрешить десятичные точки)

Question

Каков наилучший способ ограничить ввод «только для чисел» для текстовых полей?

Я ищу что-то, что допускает десятичные точки.

Я вижу много примеров. Но еще предстоит решить, какой из них использовать.

Обновление от Правина Джеганатана

Плагинов больше нет, jQuery реализовал собственный jQuery.isNumeric(), добавленный в v1.7. Смотри: https://stackoverflow.com/a/20186188/66767

Answer 1

Я только что нашел еще лучший плагин. Дает вам гораздо больше контроля. Скажем, у вас есть поле DOB , где вам нужно, чтобы оно было числовым, но также допускало использование символов "/" или "-".

Отлично работает!

Проверьте это на http://itgroup.com.ph/alphanumeric/.

Answer 2

Плагин jquery.numeric хорошо работает и для меня.

Единственное, что мне не нравится, связано с интуитивностью. Нажатие клавиш «запрещается» без обратной связи с пользователем, который может стать параноиком или задаться вопросом, не сломана ли его клавиатура.

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

$('#someInput').numeric(
    null, // default config
    null, // no validation onblur callback
    function(){
        // for every blocked keypress:
        $(this).effect("pulsate", { times:2 }, 100);
    }
);

Просто пример (с использованием jQuery UI), конечно. Любая простая визуальная обратная связь поможет.

Answer 3

Это очень просто, у нас уже есть встроенная функция javascript "isNaN".

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});

Answer 4

Использование события нажатия клавиши

1. Метод массива

var asciiCodeOfNumbers = [48, 49, 50, 51, 52, 53, 54, 54, 55, 56, 57]
$(".numbersOnly").keypress(function (e) {
        if ($.inArray(e.which, asciiCodeOfNumbers) == -1)
            e.preventDefault();
    });

2. Прямой метод

$(".numbersOnly").keypress(function (e) {
        if (e.which < 48 || 57 < e.which)
            e.preventDefault();
    });

Answer 5

Есть хороший плагин jquery под названием Плагин Jquery Mask , предназначенный для создания масок в полях формы и HTML-элементах, но вы также можете использовать его, чтобы просто определить, какие данные можно вводить внутри поля. :

$('.numeric-input').mask('0#');

Теперь в вашем поле допускаются только цифры.

Answer 6

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

<input type="text" pattern="[0-9.]+" />

$("input[type=text][pattern]").on("input", function () {
    if (!this.checkValidity())
        this.value = this.value.slice(0, -1);
});

Для решения с вводом [тип = число] см. Мой полный ответ здесь

Answer 7

У меня есть этот кусок кода, который отлично справляется со мной.

 var prevVal = '';
$(".numericValue").on("input", function (evt) {
    var self = $(this);
    if (self.val().match(/^-?\d*(\.(?=\d*)\d*)?$/) !== null) {
        prevVal = self.val()
    } else {
        self.val(prevVal);
    }
    if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57) && (evt.which != 45 && self.val().indexOf("-") == 0)) {
        evt.preventDefault();
    }
});

Answer 8

ПОЗВОЛЯЕТ ОТРИЦАТЕЛЬНЫЕ НОМЕРА ТАКЖЕ

Следующий код также принимает отрицательные числа

HTML

<input type="text" name="myText" />

JS

var pastValue, pastSelectionStart, pastSelectionEnd;

$("input").on("keydown", function() {
    pastValue          = this.value;
    pastSelectionStart = this.selectionStart;
    pastSelectionEnd   = this.selectionEnd;
}).on("input propertychange", function() {

    if ( this.value.length > 0 && $.isNumeric(this.value) == false && this.value != '-' ) {
        this.value          = pastValue;
        this.selectionStart = pastSelectionStart;
        this.selectionEnd   = pastSelectionEnd;
    }
}).on('blur', function(){
        if(this.value == '-')
            this.value = '';
});

Answer 9

Пожалуйста, добавьте внизу скрипта:

if(this.value.length == 1 && this.value == 0)
 this.value = "";

Answer 10

Этот код относится к ограничению алфавитов в текстовых полях, необходимо ввести номер oly для подтверждения при нажатии клавиши. Надеюсь, это поможет вам

HTML тэги:

<input id="txtPurchaseAmnt" style="width:103px" type="text" class="txt" maxlength="5" onkeypress="return isNumberKey(event);" />

function onlyNumbers (key) {

        var keycode = (key.which) ? key.which : key.keyCode

        if ((keycode > 47 && keycode < 58) || (keycode == 46 || keycode == 8) || (keycode == 9 || keycode == 13) || (keycode == 37 || keycode == 39)) {

            return true;
        }
        else {
            return false;
        }
    }