एचटीएमएल 5 इनपुट प्रकार संख्या: का पता लगाने के लिए कि क्या spinbox या नहीं (और कोई अन्य सुविधाओं)

Question

वेबकिट ब्राउज़रों में, एक इनपुट [प्रकार = संख्या] एक spinbox नियंत्रण नहीं है:

हालांकि, सफारी कुछ अन्य इनपुट [प्रकार = संख्या] नियमों का पालन नहीं करता है, जैसे कि केवल संख्यात्मक वर्ण दर्ज किए गए हैं। इसलिए, Modernizr पता लगाता है कि सफारी इनपुट [प्रकार = संख्या] का समर्थन नहीं करता है।

मुझे संख्या-इनपुट चौड़ाई के लिए बहुत विशेष आवश्यकताएं हैं, और जब कोई स्पिनबॉक्स होता है तो मैं चौड़ाई 2.7em बनाता हूं और इसके बिना (फ़ायरफ़ॉक्स में), चौड़ाई केवल 1.7em की आवश्यकता होती है। तो क्रोम और फ़ायरफ़ॉक्स दोनों ठीक दिखते हैं। लेकिन सफारी एक spinbox में डालता है, लेकिन किसी भी अन्य नियमों का पालन नहीं करता, तो यह 1.7em चौड़ाई हो जाता है और इस तरह दिखता है:

मैं केवल परवाह नहीं है अगर एक spinbox नियंत्रण। मुझे सफारी फ्लोटिंग के अन्य इनपुट [प्रकार = संख्या] नियमों की परवाह नहीं है। सफारी एकमात्र नियम द्वारा खेल रहा है जिसकी मुझे परवाह है। मैं इसका पता कैसे लगा सकता हूं?

Answer 1

मैं hiding spinbox सुझाव है जब Modernizr संख्या आदानों के लिए समर्थन का पता लगाने नहीं करता है:

जे एस:

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

सीएसएस:

.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 एक "कच्चा" तत्व है, हालांकि यह बहुत विश्वसनीय नहीं हो सकता है, उदा। विंडोज के लिए सफारी में।

Answer 2

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