html5 giriş tipi sayısı: tespit olup spinbox ya da (ve diğer özellikler) Webkit'teki tarayıcılarda

Question

, bir giriş [tür = numarası] bir spinbox kontrolü vardır: Ancak

, Safari, yalnızca sayısal karakterlerin girilmesini zorunlu kılan diğer bazı giriş [type = number] kurallarına uymaz. Bu nedenle, Modernizr, Safari'nin [tip = sayı] girişini desteklemediğini tespit etti.

Numara girişi genişliği için çok özel gereksinimlerim var ve bir eğirme kutusu olduğunda, genişliğini 2.7em ve onsuz (Firefox'ta olduğu gibi) yapıyorum, genişlik yalnızca 1.7em olmalıdır. Yani hem Chrome hem de Firefox iyi görünüyor. Ama Safari bir eğirme kutusu koyar ancak diğer kurallara uymaz, bu nedenle böyle 1.7em genişliğini alır ve görünür: Bir spinbox kontrolü varsa

Sadece önemsiyorum. Safari'nin aktığı diğer [input = type] kurallarından hiçbirini umursamıyorum. Safari, önemsediğim tek kural tarafından oynuyor. Bunu nasıl tespit edebilirim?

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

Eğer gerçekten istiyorsan Modernizr sayı girişleri için destek algılamadığında

Answer 1

Ben hiding spinbox önermek Eğirme kutusunun görünür olup olmadığını algılayabilirsiniz:

Burada input "ham" öğesidir, ancak bu çok güvenilir olmayabilir, örn. Windows için Safari'de.

Answer 2

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