HTML5 input type=number value пуст в 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 ввод пуст. Но если вы поместите в него номер, который имеет пробел или любые нечисловые символы, предупреждение скажет, что вход пуст.

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

23
forms html5 input javascript validation

5 ответов

хак-это использовать type="tel" вместо type="number".

Это решает 2 основные проблемы:

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

пожалуйста, посмотрите этот JSFiddle:http://jsfiddle.net/timrpeterson/CZZEX/6/

35

Я могу предложить два способа. 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() всегда возвращает пустую строку, если она соответствует символ или пробел.

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

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

4

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

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

использовать <input type="text"/>.

1

мой хак для этой проблемы включает в себя следующее (Я использую валидаторы 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);
    });
1

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

static formattedDecimalInput(input, maxScale, allowEmpty = true) {
    input = $(input);

    input.on("blur", function(e) {
        var inputVal = input.val();

        if(inputVal != "" || !allowEmpty) {
            if(inputVal == "") {
                inputVal = "0";
            }
            var number = Number(inputVal);
            input.val(number.toFixed(maxScale));    
        } else {
            input.val("");
        }
    });
}

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

Если вы хотите требуемое поле, вы можете просто проверить, пуст ли вход с javascript перед вызовом сервера

Это не ответ на первоначальный вопрос, но я искал удобный контроль для этого типа вход, когда я приехал сюда

1