هل هناك طريقة ثابتة عبر المتصفحات لإخفاء مربعات الدوران الجديدة التي تعرضها بعض المتصفحات (مثل Chrome) لإدخال HTML من رقم النوع؟ أنا أبحث عن طريقة CSS أو JavaScript لمنع ظهور الأسهم لأعلى/لأسفل.
<input id="test" type="number">
يقوم 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. تعرض هذه الصورة نتائج لنوع عنصر الإدخال = "رقم":
يضيف 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">
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;
}
وفقًا لـ دليل ترميز تجربة مستخدم Apple لـ Safari للجوال ، يمكنك استخدام ما يلي لعرض لوحة مفاتيح رقمية في متصفح iPhone:
<input type="text" pattern="[0-9]*" />
ستعمل pattern
of \d*
أيضًا.
حاول استخدام input type="tel"
بدلاً من ذلك. ينبثق لوحة مفاتيح بها أرقام ، ولا تظهر مربعات الدوران. لا يتطلب جافا سكريبت أو CSS أو ملحقات أو أي شيء آخر.
فقط إضافة هذا المغلق لإزالة الدوار على إدخال الرقم
/* 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;
}
لقد واجهت هذه المشكلة مع 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>
ووفقًا لهذه المعلومات ، يمكنك صياغة بعض CSS لإخفاء العناصر غير المرغوب فيها ، تمامًا كما قالJosh.
هذا هو أفضل إجابة وأود أن أقترح على الماوس فوق وبدون الماوس فوق
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[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
<input id="test" type="number">
ليس ما طلبته ، لكنني أفعل ذلك بسبب وجود خلل في التركيز في 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";
}
قد يعطيك فكرة للمساعدة فيما تحتاج إليه.
على 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 بسبب محدد سيئ.
في كل مرة حاولت. نفس الشيء بالنسبة إلى زر الدوران الداخلي.
لجعل هذا العمل في 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 */
}
ما زلت أواجه مشكلة في إيجاد حل لأوبرا أيضًا.
ربما قم بتغيير إدخال الرقم باستخدام 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';
عملت بشكل جيد لأغراضي
يمكنك استخدام هذا الكود البسيط في ملف CSS الخاص بك:
input[type="number"] {
-moz-appearance: textfield;
}