it-swarm.asia

هل يمكنني إخفاء مربع الدوران لإدخال رقم HTML5؟

هل هناك طريقة ثابتة عبر المتصفحات لإخفاء مربعات الدوران الجديدة التي تعرضها بعض المتصفحات (مثل Chrome) لإدخال HTML من رقم النوع؟ أنا أبحث عن طريقة CSS أو JavaScript لمنع ظهور الأسهم لأعلى/لأسفل.

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

يقوم CSS هذا بإخفاء الزر الدوراني لمتصفحات webkit (لقد اختبره في Chrome 7.0.517.44 و Safari الإصدار 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" />

يمكنك دائمًا استخدام المفتش (webkit ، وربما Firebug for Firefox) للبحث عن خصائص CSS المتطابقة للعناصر التي تهتم بها ، والبحث عن عناصر Pseudo. تعرض هذه الصورة نتائج لنوع عنصر الإدخال = "رقم":

Inspector for input type=number (Chrome)

931
antonj

يضيف Firefox 29 حاليًا دعمًا لعناصر الأرقام ، لذا إليك مقتطف لإخفاء المغازل في متصفحات webkit و moz:

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">
403
swehren

اجابة قصيرة:

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

إجابة أطول:

للإضافة إلى الإجابة الحالية ...

ثعلب النار:

في الإصدارات الحالية من Firefox ، القيمة الافتراضية (وكيل المستخدم) للخاصية { -moz-appearance property } في هذه العناصر هي 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"/>

كروم:

في الإصدارات الحالية من Chrome ، القيمة الافتراضية (وكيل المستخدم) للخاصية { -webkit-appearance property } على هذه العناصر هي بالفعل 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 يُستخدم لإزالة الهامش في الأقدم إصدارات Chrome.

حاليًا ، وحتى كتابة هذا ، يوجد هنا وكيل وكيل المستخدم الافتراضي في فئة "الزائفة الداخلية":

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;
}
326
Josh Crozier

وفقًا لـ دليل ترميز تجربة مستخدم Apple لـ Safari للجوال ، يمكنك استخدام ما يلي لعرض لوحة مفاتيح رقمية في متصفح iPhone:

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

ستعمل pattern of \d* أيضًا.

120
team_steve

حاول استخدام input type="tel" بدلاً من ذلك. ينبثق لوحة مفاتيح بها أرقام ، ولا تظهر مربعات الدوران. لا يتطلب جافا سكريبت أو CSS أو ملحقات أو أي شيء آخر.

36
MERT DOĞAN

فقط إضافة هذا المغلق لإزالة الدوار على إدخال الرقم

/* 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;
}
10
Sanjib Debnath

لقد واجهت هذه المشكلة مع input[type="datetime-local"] ، وهو مشابه لهذه المشكلة.

لقد وجدت طريقة للتغلب على هذا النوع من المشاكل.

أولاً ، يجب عليك تشغيل ميزة جذر الظل من Chrome من خلال "DevTools -> الإعدادات -> عام -> العناصر -> إظهار وكيل المستخدم ظل 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>

 shadow DOM of input[type="number"

ووفقًا لهذه المعلومات ، يمكنك صياغة بعض CSS لإخفاء العناصر غير المرغوب فيها ، تمامًا كما قالJosh.

8
Xiao Hanyu

هذا هو أفضل إجابة وأود أن أقترح على الماوس فوق وبدون الماوس فوق

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; }
3
Swap-IOS-Android
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">
3
Prince Sharma

ليس ما طلبته ، لكنني أفعل ذلك بسبب وجود خلل في التركيز في WebKit مع صناديق spinboxes:

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

قد يعطيك فكرة للمساعدة فيما تحتاج إليه.

3
Gaurav

على Firefox لأوبونتو ، فقط باستخدام

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

لم الحيلة بالنسبة لي.

مضيفا

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

سوف يقودني إلى

فئة زائفة غير معروفة أو عنصر زائف '-webkit-external-spin-button' تم تجاهل Ruleset بسبب محدد سيئ.

في كل مرة حاولت. نفس الشيء بالنسبة إلى زر الدوران الداخلي.

2
sonny_boy

لجعل هذا العمل في Safari وجدت أنه من المهم إضافة ضبط مجموعة الويب أن يكون زر الدوران مخفيًا.

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

ما زلت أواجه مشكلة في إيجاد حل لأوبرا أيضًا.

1
luckychii

ربما قم بتغيير إدخال الرقم باستخدام javascript إلى إدخال النص عندما لا تريد تدورًا ؛

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

عملت بشكل جيد لأغراضي

0
user3121518

يمكنك استخدام هذا الكود البسيط في ملف CSS الخاص بك:

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