html5 номер типа ввода: определить, есть ли спинбокс или нет (и никаких других функций)

Question

В браузерах Webkit вход [type = number] имеет элемент управления spinbox:

Однако Safari не следует за другим вводом [type = number] правила, например, обязывают вводить только числовые символы.Следовательно, Modernizr обнаруживает, что Safari не поддерживает ввод [type = number].

У меня есть особые потребности в ширине ввода чисел, и когда есть спинбокс, я делаю ширину 2.7em и без нее (как вFirefox), ширина должна быть только 1.7em.Так что Chrome и Firefox выглядят хорошо.Но Safari добавляет спин-бокс, но не следует никаким другим правилам, поэтому он получает ширину 1,7 мм и выглядит следующим образом:

Я тольковсе равно, если есть элемент управления Spinbox.Меня не волнует ни одно из других правил ввода [type = number], которые нарушает Safari.Сафари играет по единственному правилу, которое меня волнует.Как я могу это обнаружить?

Answer 1

Я предлагаю скрывать спинбокс, когда Modernizr не обнаруживает поддержку ввода чисел:

JS:

if (!Modernizr.inputtypes.number) {
    $('body').addClass('no-number-input');
}

CSS:

.no-number-input input::-webkit-outer-spin-button,
.no-number-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}

Если вы действительно хотите определить, виден ли спинбокс, вы можете сделать что-то вроде:

window.getComputedStyle(input, '-webkit-inner-spin-button').getPropertyValue('-webkit-appearance') != 'none'

, где input является «необработанным» элементом, хотя это может быть не очень надежно, например, вSafari для Windows.

Answer 2

if (Modernizr.inputtypes.number) {
  $('input[type=number]').width('2.7em');
} else {
  $('input[type=number]').width('1.7em');
}