html5 número de tipo de entrada: detectar si caja de hilatura o no (y no otras características)

Question

En los navegadores Webkit, una entrada [type = número] tiene un control de cuadro de número:

Sin embargo, Safari no sigue algunas otras reglas de entrada [type = number], como forzar que solo se ingresen caracteres numéricos. Por lo tanto, Modernizr detecta que Safari no admite la entrada [type = number].

Tengo necesidades muy particulares para el ancho de entrada de número, y cuando hay un cuadro de giro, hago el ancho 2.7em y sin él (como en Firefox), el ancho solo necesita 1.7em. Así que Chrome y Firefox se ven bien. Pero Safari pone en una caja de hilatura, pero no sigue cualesquiera otras normas, por lo que recibe el ancho 1.7em y se ve así:

Sólo me importa si hay un control de cuadro de número. No me importan las otras reglas de entrada [type = number] que Safari está burlando. Safari está jugando con la única regla que me importa. ¿Cómo lo detecto?

Answer 1

que sugieren hiding el cuadro de número cuando Modernizr no detecta el apoyo para las entradas numéricas:

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; 
} 

Si usted realmente quiere detectar si el cuadro de giro es visible, puede hacer algo como:

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

donde input es un elemento "crudo", aunque puede que no sea muy confiable, p. en Safari para Windows.

Answer 2

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