Тип ввода HTML5 = числовое значение пусто в Webkit, если есть пробелы или нечисловые символы?

Это странное поведение для меня, но в браузерах Webkit (Chrome/Safari, не Firefox), если я включаю пробел в строку чисел в <input type=number>, а затем value этого вход пуст.

См. этот JSFiddle: http://jsfiddle.net/timrpeterson/CZZEX/5/

Здесь код:

<input id='withOutspace' type='number' value='123'>
<input id='with_space' type='number' value='123 123'>
<button>click</button>

$('button').click(function(){ 
    alert("withOut:"+$('#withOutspace').val()+" |||| with:"+$('#with_space').val());
});

Если вы перейдете в этот JSFiddle, вы заметите, что вход with_space пуст. Но если вы поместите в него число, в котором есть пробел или любые нечисловые символы, в предупреждении будет указано, что вход пуст.

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

Ответ 1

Взлом заключается в использовании type="tel" вместо type="number".

Это решает два основных вопроса:

Он вызывает цифровую клавиатуру на мобильных устройствах.
Он проверяет (и не пуст) с цифрами или не номерами в качестве входных данных.

См. этот JSFiddle: http://jsfiddle.net/timrpeterson/CZZEX/6/

Ответ 2

Я могу предложить два пути. 1. Предотвращение ввода символов

# updated to support more numerical characters related
$(window).keydown(function(e) {
  if($('input[type=number]').index($(e.target))!=-1) {
    if(
      ($.inArray(e.keyCode, [48,49,50,51,52,53,54,55,56,57,58,96,97,98,99,100,101,102,103,104,105,8,13,190,189]) == -1) // digits, digits in num pad, 'back', 'enter', '.', '-'
      || (e.keyCode == 190 && $(e.target).val().indexOf(".") != -1) // not allow double dot '.'
      || (e.keyCode == 190 && $(e.target).val().length == 0) // not allow dot '.' at the begining
    ) {
      e.preventDefault();
    }
  }
});

или 2. Измените тип ввода на лету

$('input[type=number]').focus(function() {
    $(this).prop('type', 'text');
});

это позволяет поместить все, что вы хотите, и изменить его тип onblur

$(this).blur(function() {
    $(this).prop('type', 'number');
});

Но все еще вы не можете хранить нечетные значения во вводе с типом = число, поэтому val() всегда будет возвращать пустую строку, если она соответствует char или пробелу.

Итак, по крайней мере, вам нужно удалить весь мусор с помощью .replace(/[^\d]/g, '') - это означает "удалить все, кроме номеров", прежде чем вы измените тип back

В мой пример Я показываю оба метода + очищать входные значения.

Ответ 3

Вы устанавливаете числовое поле ввода в строку, которая не является числом. Чего вы ожидали? Все дело в том, что эти поля не позволяют или не принимают числовой ввод. Они задокументированы только для принятия значения с плавающей запятой./p >

Нет "взлома", доступного или требуемого; решение состоит в том, чтобы прекратить использование поля ввода number для значения, которое не является числом. Кредитные карты, телефонные номера и т.д.; эти вещи не являются цифрами. Они содержат цифры как подмножество допустимых символов, но также содержат полностью нечисловые символы, такие как пробелы, дефисы и скобки. Они должны храниться и обрабатываться как обычные строки.

Используйте <input type="text"/>.

Ответ 4

Мой взлом для этой проблемы включает следующее (я использую валидаторы jQuery):

    $(document).on('keyup', '[type="number"]', function () {
        if (this.validity.badInput) {
            $(this).attr('data-badinput', true);
        }
    });

Позже в методе валидатора я делаю это:

    $.validator.addMethod('isInteger', function (value, element, parameterValue) {
        if ($(element).attr('data-badinput')) {
            //We know nasty browser always clears incorrect input, so empty string will look OK next time
            $(element).removeAttr('data-badinput');
            return false;
        }
        return !value || /^-?\d+$/.test(value);
    });