क्या मैं HTML5 नंबर इनपुट के स्पिन बॉक्स को छिपा सकता हूं?

Question

क्या नए स्पिन बॉक्स को छिपाने के लिए ब्राउज़रों में एक सुसंगत तरीका है कि कुछ ब्राउज़र (जैसे क्रोम) एचटीएमएल इनपुट प्रकार के लिए प्रस्तुत करते हैं? मैं सीएसएस या जावास्क्रिप्ट विधि को अप / डाउन एरो को प्रदर्शित होने से रोकने के लिए देख रहा हूं।

<input id="test" type="number">

Comments

क्या आप उस कोड का उदाहरण पोस्ट कर सकते हैं जिसका आप उपयोग कर रहे हैं? एक स्क्रीनशॉट बहुत अच्छा होगा और साथ ही हमें पता होगा कि आप क्या देख रहे हैं। मैं <input type="number" min="4" max="8" />Chrome में देख रहा हूं और किनारे पर ऊपर और नीचे तीर के साथ एक विशिष्ट इनपुट फ़ील्ड देख रहा हूं ।

— कैल्विनफ

तुम वही देख रहे हो जो मैं देख रहा हूं। मैं यह सुनिश्चित करने की कोशिश कर रहा हूं कि मोबाइल ब्राउज़र एक उपयुक्त कीबोर्ड लाए, और कंप्यूटर ब्राउज़र में दिखाई देने वाले तीर को रोकने के लिए टाइप = नंबर मार्कअप रखें।

— एलन

यदि आप संख्या इनपुट का उपयोग कर रहे हैं, तो आधुनिक आईओएस, एंड्रॉइड और डेस्कटॉप ब्राउज़रों के साथ अच्छा खेलने वाले कुछ का उपयोग करना सुनिश्चित करें <input type="number" pattern="[0-9]*" inputmode="numeric">:। अधिक जानकारी: stackoverflow.com/a/31619311/806956

— आरोन ग्रे

मैं क्या कर सुझाव देते हैं, की तर्ज पर मार्कअप लेखन है <input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... > और का उपयोग कर jQuery Validati या संभाल सत्यापन के समान है। मैंने इस दृष्टिकोण का परीक्षण नहीं किया है, जिसके कारण यह एक टिप्पणी है, बजाय एक उत्तर के।

— एगी हैमरथिफ़

Answer 1

यह CSS वेबकिट ब्राउज़रों के लिए स्पिन-बटन को प्रभावी ढंग से छिपाता है (क्रोम 7.0.517.44 और सफारी संस्करण 5.0.2 (6533.18.5) में इसका परीक्षण किया है):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

<input type="number" step="0.01" />

आप जिन तत्वों में रुचि रखते हैं, उनके लिए मिलान किए गए सीएसएस गुणों को देखने के लिए आप हमेशा निरीक्षक (वेबकिट, संभवतः फायरबग फॉर फ़ायरफ़ॉक्स) का उपयोग कर सकते हैं, छद्म तत्वों की तलाश करें। यह छवि इनपुट तत्व प्रकार = "संख्या" के लिए परिणाम दिखाती है:

Comments

ऐसा लगता है कि क्रोम को अब कोई समस्या नहीं है, इसलिए आप display: none;चयनकर्ता के अंदर केवल एक चीज के रूप में उपयोग कर सकते हैं

— फिल्पेरो सेप

यह दुर्भाग्य से क्रॉस-ब्राउज़र नहीं है, इसलिए type=numberयदि आप इन तीरों को छुपाना चाहते हैं तो मैं इसका उपयोग करने की सलाह दूंगा। जैसे वर्तमान में वे अभी भी ओपेरा में प्रदर्शित होंगे और वे फ़ायरफ़ॉक्स, IE आदि में प्रदर्शित होने लगेंगे जब वे इस इनपुट प्रकार को लागू करेंगे।

— मैजोल

मुझे ऐसे वैकल्पिक समाधानों पर max=और min=विशेषताओं का उपयोग करने की आवश्यकता है <input>जैसे कि type="text"मान्य HTML5 नहीं है। लोग इन स्पिनरों सहित ओपेरा का भी उल्लेख करते हैं। क्या ओपेरा का सफ़ारी / क्रोम के समान समाधान है?

— unode

रिकॉर्ड के लिए, क्रोम में input::-webkit-clear-button

— X33 के लिए

2019 तक, फ़ायरफ़ॉक्स में यह मेरे लिए काम नहीं करता था। इस समाधान ने मेरे लिए काम किया: stackoverflow.com/questions/45396280/…

— lwitzel

Answer 2

फ़ायरफ़ॉक्स 29 वर्तमान में संख्या तत्वों के लिए समर्थन जोड़ता है, इसलिए यहां वेबकिट और मोज़्ज़ आधारित ब्राउज़रों में स्पिनरों को छिपाने के लिए एक स्निपेट है:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

<input id="test" type="number">

Comments

उस प्लस का answer मार्जिन: ० ’जो कि एनटॉज के उत्तर से है, जो मैंने प्रयोग किया है

— असफंद काजी

मैंने इसे मार्जिन के बिना इस्तेमाल किया, और ठीक लगता है (मई 2020)।

— croraf

Answer 3

संक्षिप्त जवाब:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

<input type="number" />

दीर्घ उत्तर:

मौजूदा उत्तर में जोड़ने के लिए ...

फ़ायरफ़ॉक्स:

फ़ायरफ़ॉक्स के वर्तमान संस्करणों में, (उपयोगकर्ता एजेंट) इन तत्वों पर -moz-appearanceसंपत्ति का डिफ़ॉल्ट मूल्य है number-input। उस मूल्य में परिवर्तन करने textfieldसे स्पिनर प्रभावी रूप से दूर हो जाता है।

input[type="number"] {
    -moz-appearance: textfield;
}

कुछ मामलों में, हो सकता है कि आप शुरुआत में स्पिनर को छिपा दें , और फिर होवर / फ़ोकस पर दिखाई दें। (यह वर्तमान में Chrome में डिफ़ॉल्ट व्यवहार है)। यदि हां, तो आप निम्नलिखित का उपयोग कर सकते हैं:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

---

क्रोम:

क्रोम के वर्तमान संस्करणों में, (उपयोगकर्ता एजेंट) इन तत्वों पर -webkit-appearanceसंपत्ति का डिफ़ॉल्ट मूल्य पहले से ही है textfield। स्पिनर को हटाने के लिए, -webkit-appearanceसंपत्ति के मूल्य noneको ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonछद्म वर्गों (इसे -webkit-appearance: inner-spin-buttonडिफ़ॉल्ट रूप से) पर बदलना होगा ।

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

<input type="number" />

यह इंगित करने योग्य है कि क्रोम के पुराने संस्करणों margin: 0में मार्जिन को हटाने के लिए उपयोग किया जाता है ।

वर्तमान में, इसे लिखने के रूप में, यहां 'इनर-स्पिन-बटन' छद्म वर्ग पर डिफ़ॉल्ट उपयोगकर्ता एजेंट स्टाइलिंग है:

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

Comments

मुझे यह उत्तर बेहतर लगता है क्योंकि इसमें प्रासंगिक फ़ायरफ़ॉक्स जानकारी शामिल है, जो कुछ विकसित करते समय, इस पर विचार करने की आवश्यकता है। वेबकिट-केवल उत्तर जो अन्य ब्राउज़र इंजनों की अनदेखी करते हैं, वांछित होने के लिए बहुत कुछ छोड़ देते हैं

— RozzA

फ़ायरफ़ॉक्स समाधान के लिए एक महत्वपूर्ण जोड़ें। इस प्रकार ===> इनपुट [प्रकार = "संख्या"] {-मोज़-उपस्थिति: टेक्स्टफील्ड! महत्वपूर्ण! }

— सज्जाद सरेरी

Answer 4

मोबाइल सफारी के लिए Apple के उपयोगकर्ता अनुभव कोडिंग गाइड के अनुसार , आप iPhone ब्राउज़र में एक संख्यात्मक कीबोर्ड प्रदर्शित करने के लिए निम्नलिखित का उपयोग कर सकते हैं:

<input type="text" pattern="[0-9]*" />

एक patternका \d*भी काम करेंगे।

Comments

उपरोक्त समस्या के बावजूद, दी गई समस्या के लिए जाँच किया गया समाधान बहुत अच्छी तरह से काम करता है, मैंने इस समाधान पर स्विच करने का निर्णय लिया, यहाँ। एक कारण यह भी है कि उदाहरण के लिए ओपेरा ब्राउज़र भी तीर दिखाता है, जिसे आपको भी रोकना चाहिए। दूसरी बात, मैंने क्रोम 17 में बड़ी समस्याओं का अवलोकन किया। एक तरफ, 'मैक्सलेन' की विशेषता अब किसी भी काम की नहीं लगती है; आप जितने चाहें उतने वर्ण दर्ज कर सकते हैं। दूसरी ओर, एक निश्चित लंबाई से अधिक की संख्याएं केवल गोल होती हैं। "आईओएस डिवाइस पर केवल सुन्नत को खोलने" के लिए इस समाधान का उपयोग करना मेरे लिए अधिक सुरक्षित लगता है।

— Jan

मैं इस समाधान के साथ भी गया था, क्योंकि मेरे पास कुछ जेएस थे जो इनपुट फ़ील्ड में नंबर बनाते थे जब मैंने टाइप किया था और यह नंबर फ़ील्ड के साथ काम नहीं करता था। तो यह एक आकर्षण की तरह काम किया।

— टोकिमन

यह वर्तमान में सभी ब्राउज़रों में एंड्रॉइड पर कुछ भी नहीं करता है। एंड्रॉइड 4.2 पर ब्राउज़र 4.2.2, क्रोम 28 और फ़ायरफ़ॉक्स 23 में इस परीक्षण पृष्ठ पर परीक्षण किया गया । वे ब्राउज़र इस मार्कअप के साथ मानक टेक्स्ट कीबोर्ड दिखाते हैं।

— रोरी ओ'केन

यहाँ Android और iOS दोनों के लिए एक अच्छा समाधान है: stackoverflow.com/a/31619311/806956

— हारून ग्रे

@AaronGray एक वर्ग में वापस आ गया है: हालांकि उस समाधान में डेस्कटॉप के लिए स्पिनर हैं।

— स्ट्रेंजवेल

Answer 5

input type="tel"इसके बजाय प्रयोग करके देखें । यह संख्याओं के साथ एक कीबोर्ड को पॉप अप करता है, और यह स्पिन बॉक्स नहीं दिखाता है। इसके लिए कोई जावास्क्रिप्ट या सीएसएस या प्लगइन्स या कुछ और की आवश्यकता होती है।

Comments

यह समाधान वर्तमान में किसी भी ब्राउज़र में कोई सत्यापन नहीं type=numberकरता है।

— पेपिजन

टेलीफोन कीबोर्ड नंबर कीबोर्ड जितना अच्छा नहीं है , हालांकि यह टेक्स्ट कीबोर्ड से कहीं बेहतर है । टेलीफोन कीबोर्ड में अप्रासंगिक अक्षर और चिन्ह होते हैं जिन्हें संख्या कीबोर्ड से हटा दिया जाता है। ( एंड्रॉइड 4.2 पर इस पृष्ठ के साथ परीक्षण किया गया।)

— रोरी ओ'केन

कोई नहीं है "।" in the tel कीबोर्ड: - <

— gion_13

@ RoryO'Kane नंबर कीबोर्ड का वास्तव में बहुत बड़ा नुकसान है कि यह किसी भी इनपुट को अस्वीकार कर देगा जो कड़ाई से नंबर नहीं है।

— जोकेम कूइजपर्स

यह एक समाधान नहीं है, और एचटीएमएल 5 मानकों द्वारा इसकी बेवकूफी है। इनपुट [दूरभाष] फोन नंबरों के लिए है, इनपुट [संख्या] फ्लोटिंग पॉइंट वाले सहित जेनेरिक नंबरों के लिए है। तो यह कोई हल नहीं है।

— वासिल पोपोव

Answer 6

नंबर के इनपुट पर स्पिनर को हटाने के लिए केवल इस सीएसएस को जोड़ें

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Comments

के अनुसार कैन्युअस input[type=number]{ -webkit-appearance }क्रोम के लिए पर्याप्त होना चाहिए, लेकिन निश्चित रूप से आपको छद्म तत्वों को भी संशोधित करने की आवश्यकता है। किसी भी विचार क्यों ??

— ओल्डबॉय जूल

Answer 7

मैंने इस समस्या का सामना किया है input[type="datetime-local"], जो इस समस्या के समान है।

और मुझे इस तरह की समस्याओं को दूर करने का एक तरीका मिल गया है।

सबसे पहले, आपको "DevTools -> Settings -> General -> Elements -> उपयोगकर्ता एजेंट छाया DOM दिखाएं" द्वारा क्रोम की छाया-मूल विशेषता को चालू करना होगा।

फिर आप सभी छायांकित DOM तत्वों को देख सकते हैं , उदाहरण के लिए <input type="number">, छायांकित DOM वाला पूर्ण तत्व है:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

और इन सूचनाओं के अनुसार, आप अवांछित तत्वों को छिपाने के लिए कुछ सीएसएस का मसौदा तैयार कर सकते हैं, जैसा कि @ जोश ने कहा।

Answer 8

वह नहीं जो आपने मांगा था, लेकिन मैं स्पिनबॉक्स के साथ वेबकीट में फोकस बग के कारण ऐसा करता हूं:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

यह आपको एक विचार दे सकता है कि आपको क्या चाहिए।

Comments

यह वही नहीं है जो मैं बात कर रहा था, लेकिन एचटीएमएल 5 के मानकीकरण की मौजूदा कमी के कारण यह सबसे अच्छा समाधान प्रस्तुत किया गया है। डेस्कटॉप की तुलना में मोबाइल के लिए एक अलग साइट प्रदान करना (कोई फर्क नहीं पड़ता कि यह कैसे लागू किया जाता है) वर्तमान में इसे पूरा करने का एकमात्र तरीका है। हालांकि मुझे DOM को जोड़ने से पहले तत्व की एक प्रति बनानी होगी और 'प्रकार' मान को बदलना होगा। चूंकि IE को तत्व में जोड़े जाने के बाद इनपुट के प्रकार को संशोधित करने की अनुमति नहीं है।

— एलन

Answer 9

यह अधिक बेहतर उत्तर है जो मैं माउस पर और माउस के बिना पर सुझाव देना चाहूंगा

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }

Comments

क्या margin: 0पूरा करता है? इसके अलावा, spin-buttonछद्म तत्व hoverनए ब्राउज़र में ट्रिगर नहीं लगते हैं?

— ओल्डबॉय

Answer 10

सफारी में इस काम को करने के लिए मुझे महत्वपूर्ण भूमिका मिली। वेबकिट समायोजन में स्पिन बटन को छिपाया जाना आवश्यक है।

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

मुझे अभी भी ओपेरा के लिए एक समाधान के रूप में अच्छी तरह से काम करने में परेशानी हो रही है।

Answer 11

Ubuntu के लिए फ़ायरफ़ॉक्स पर, बस का उपयोग कर

    input[type='number'] {
    -moz-appearance:textfield;
}

मेरे लिए चाल चली।

जोड़ा जा रहा है

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

मुझे ले जाएगा

अज्ञात छद्म वर्ग या छद्म तत्व '-webkit- बाहरी-स्पिन-बटन'। खराब चयनकर्ता के कारण नियमों की अनदेखी की गई।

हर बार मैंने कोशिश की। आंतरिक स्पिन बटन के लिए भी।

Comments

-webkit-*क्रोम के लिए -moz-*है, मोज़िला फ़ायरफ़ॉक्स के लिए है। इसलिए यह आपके काम नहीं आया।

— गुस्तावव गिल

Answer 12

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;

<input id="test" type="number">

Comments

यह उत्तर कई बार पहले ही दिया जा चुका है। यह एक नया प्रदान करने से पहले मौजूदा उत्तरों को पढ़ने में मदद करता है, यदि नया एक डुप्लिकेट है।

— डैन डस्केल्सस्कु जूल 21'18

Answer 13

हो सकता है कि जब आप स्पिनर नहीं चाहते हैं तो जावास्क्रिप्ट के साथ नंबर इनपुट को टेक्स्ट इनपुट में बदल दें;

document.getElementById('myinput').type = 'text';

और उपयोगकर्ता को पाठ दर्ज करने से रोकें;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

यदि आप एक स्पिनर चाहते हैं तो फिर इसे जावास्क्रिप्ट को वापस बदल दें;

document.getElementById('myinput').type = 'number';

इसने मेरे उद्देश्यों के लिए अच्छा काम किया

Answer 14

WebKit और Blink- आधारित ब्राउज़र और ब्राउज़र के सभी प्रकार में निम्नलिखित CSS का उपयोग करते हैं:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Comments

यह प्रयोग किस ब्राउज़र पर काम करेगा webkit? चौदह मौजूदा उत्तरों के साथ एक नौ साल पुराने प्रश्न का उत्तर देते समय, यह जानना महत्वपूर्ण है कि आपका उत्तर कैसे और क्यों काम करता है और यह बताता है कि इस प्रश्न का नया पहलू क्या है।

— जेसन एलेर

Answer 15

मुझे काम करने के लिए इसकी जरूरत थी

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

की अतिरिक्त लाइन appearance: noneमेरे लिए महत्वपूर्ण थी।