javascript - हरण - पॉइंटिंग डिवाइस क्या है




क्या मैं एचटीएमएल 5 नंबर इनपुट के स्पिन बॉक्स को छुपा सकता हूं? (8)

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

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

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

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 प्रॉपर्टी के मूल्य को ::-webkit-outer-spin-button / ::-webkit-inner-spin-button छद्म वर्गों में none बदला जाना चाहिए (यह है -webkit-appearance: 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 इंगित करने लायक है margin: 0 क्रोम के पुराने संस्करणों में मार्जिन को हटाने के लिए 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;
}

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

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

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

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

यह आपको जो चाहिए उसे मदद करने के लिए आपको एक विचार दे सकता है।


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

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

मेरे लिए चाल है।

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

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

मुझे ले जाएगा

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

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


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

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

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


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

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

सबसे पहले, आपको क्रोम की छाया-रूट सुविधा को "DevTools -> सेटिंग्स -> सामान्य -> ​​तत्वों -> उपयोगकर्ता एजेंट छाया DOM दिखाएं"

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

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

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


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

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

सफारी में यह काम करने के लिए मैंने जोड़ दिया! वेबकिट समायोजन के लिए महत्वपूर्ण स्पिन बटन छुपाया जा सकता है।

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 */
}

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


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

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

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





numbers