Вопрос по jquery, validation, javascript – Как правильно фильтровать числовые значения для текстового поля?

4

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

$(textField).onKeyPress(function(e) {
    if (e.which < 48 && e.which > 57)
        e.preventDefault();
});

Это довольно просто, но, как оказалось, (в последней версии всех браузеров) Firefox сделает это, также предотвращая перемещение с помощью клавиш со стрелками и клавиш удаления / возврата, в отличие от других браузеров.

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

Мой окончательный код выглядит примерно так:

$(textField).onKeyPress(function(e) {
    var code = e.which || e.keyCode;
    if (code > 31  // is not a control key
        && (code < 37 || code > 40) // is not an arrow key
        && (code < 48 || code > 57) // is not numeric
        && (code != 46) // is not the delete key
    )
        e.preventDefault();
});

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

Что я делаю не так? Какова наилучшая практика с точки зрения такого рода проверки?

@RayCheng смотрите мое обновление ниже: вы можете использовать простыеpropertychange чтобы справиться с этим :) надеюсь, что поможет вам обоим Tats_innit
Вас волнует, если пользователь скопирует и вставит не числовой текст в поле ввода? как насчет десятичных и отрицательных чисел? ты разрешаешь это? Ray Cheng
Там могут быть побочные эффекты, если вы используетеkeypress или жеkeydown потому что если пользователь удерживает клавишу нажатой, событие повторяется, и код вызывается несколько раз.keyup выполняется только один раз. Ray Cheng
@RayCheng Хороший вопрос. Было бы действительно хорошо позаботиться об этих случаях, и поэтому я вижу ценность в предоставляемых решениях keyUp. Я поражен, увидев, что никто не использует подход keyPress - который кажется мне более естественным. Десятичные и отрицательные значения могут быть исключены из этого подхода, мой диапазон допустимых символов - просто цифры (0-9). Alpha

Ваш Ответ

3   ответа
2

Working demo http://jsfiddle.net/Pb2eR/23/ Updated Копировать / Вставить демо:http://jsfiddle.net/Pb2eR/47/ (В этой демонстрации вы копируете строку вставки с символами, которые она не разрешает, иначе она позволит копировать вставляемый номер: протестировано в сафари)

Demo for arrow key to work http://jsfiddle.net/gpAUf/

Это поможет вам.

Примечание: в этой версии, даже если вы скопируете вставку, она установит пустое поле ввода, протестировано в safari lion osx :)

Хорошая ссылка: [1]Как разрешить только числовые (0-9) в поле ввода HTML, используя jQuery?

code

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

html

<input type="text" class="hulk" value="" />
​

Update for copy paste материал

$(".hulk").keyup(function(){

    this.value = this.value.replace(/[^0-9\.]/g,'');

});

$(".hulk").bind('input propertychange', function() {

     this.value = this.value.replace(/[^0-9\.]/g,'');
});​

code from another demo

$(".hulk").bind('input propertychange', function(event) {
         if( !(event.keyCode == 8    // backspace
        || event.keyCode == 46      // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
     this.value = this.value.replace(/[^0-9\.]/g,'');
});

​
@Tats_innit Спасибо. Это действительно хороший подход и не выглядит нервным (в частности, копирование / вставка). Тем не менее, у него есть другие причуды. Например, по крайней мере в Chrome он не позволяет использовать клавиши со стрелками для перемещения по полю. Как видите, маленькие причуды делают его более сложным и более сложным, поэтому я спрашиваю о «правильном» подход принять. Alpha
О, тоже. Я поражен классом "Халк". Какое-то отношение к персонажу Marvel? Alpha
как насчет копирования и вставки с помощью мыши?
я был на FF12 и IE9. Ваш код не выполняется, когда я копирую и вставляю мышью. Кроме того, как пользователи вводят-1.2.3.4?
@RayCheng круто получил вас, посмотрите мое обновление выше, вы можете сделать это простым способом, используяpropertyChnage
-1

это позволит как Int. он также удаляет текст, если пользователь копирует и вставляет мышью.

$(document).ready(function () {
    $('#textfield').bind('keyup blur', function (e) {
        if (e.type == 'keyup') {
            if (parseInt($(this).val()) != $(this).val()) {
                $(this).val($(this).val().slice(0, $(this).val().length - 1));
            }
        } else if (e.type ==, 'blur') {
            $(this).val('');
        }
    });
});
@ downvoter, что не так с моим ответом?
4

так и на событие размытия. Когда кто-то нажимает клавишу, мы проверяем, является ли введенная клавиша цифрой. Если это так, мы разрешаем это. В противном случае мы это предотвращаем.

Если поле размыто, мы удаляем все нечисловые значения и все последующие значения. Это предотвратит вставку пользователем нечисловых строк:

$("#textfield").on("keypress blur", function(e){
    if ( e.type === "keypress" )
        return !!String.fromCharCode(e.which).match(/^\d$/);
    this.value = this.value.replace(/[^\d].+/, "");
});

Демо-версия:http://jsfiddle.net/jonathansampson/S7VhV/5/

Спасибо! Выиграл ли это "нервный"? пользователю? Alpha
Именно так. Не вмешивайтесь в блокировку события, просто отрегулируйте результат по факту.
@RayCheng Спасибо за отличный вклад. Я обновил решение, включив в него ввод ключа и вставку.
@ Альфа Вы правы. Я использовал другой подход выше и работаю над решением для тех, кто также копирует / вставляет число.
после того, как я набрал123 а затем скопировать и вставитьa99 с помощью мыши, я в конечном итоге12399, это было бы хорошо иметь123 вместо. но в целом это хороший подход.

Похожие вопросы