HTML5 nömrəsi girişləri üçün giriş sahəsini gizləyə bilərəmmi?

Brauzerlərdə yeni brauzerlər gizlətmək üçün qalıcı bir yol varmı ki, bəzi brauzerlər (məsələn, Chrome) HTML tipli nömrələrə daxil olmaq üçün göstərilir? Yuxarı / aşağı okları görünməməsi üçün CSS və ya JavaScript üsulunu axtarıram.

 <input id="test" type="number"> 
773
24 сент. Alan tərəfindən hazırlanan 24 Sentyabr. 2010-09-24 23:58 '10 at 23:58 2010-09-24 23:58
@ 16 cavab

Bu CSS webkit brauzerlər üçün sürüşmə düyməsini effektiv şəkildə gizlədir (Chrome 7.0.517.44 və Safari versiyası 5.0.2 (6533.18.5)).

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

Siz həmişə maraqlandıran elementlər üçün uyğun CSS xüsusiyyətlərini axtarmaq üçün yalançı elementləri axtarmaq üçün müfəttişi (webkit, bəlkə Firefox üçün Firebug) istifadə edə bilərsiniz. Bu şəkil giriş elementi = "nömrə" üçün nəticəni göstərir:

2019

864
28 нояб. Cavab 28 oktyabr tarixində antonj tərəfindən verilir . 2010-11-28 21:17 '10 at 21:17 2010-11-28 21:17

Firefox 29 sayısal elementlərə dəstək əlavə etdi, buna görə webkit və moz brauzerlərdə sayğacları gizlətmək üçün bir parçadır:

border=0
 <input id="test" type="number"> 
388
21 марта '14 в 15:45 2014-03-21 15:45 cavab 21 Mart '14 'də saat 15:45' də verilir. 2014-03-21 15:45

Qısa cavab:

 <input type="number" /> 

Daha uzun cavab:

Mövcud bir cavab əlavə etmək üçün ...

Firefox:

Firefox'un mövcud versiyalarında, bu elementlər üçün -moz-appearance (istifadəçi agenti) üçün standart dəyər -moz-appearance . Bu textfield dəyərinin dəyişdirilməsi sayacı təsirli bir şəkildə aradan qaldırır.

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

Bəzi hallarda, başlanğıcda gizlənmək üçün iplikçiyə ehtiyacınız ola bilər və sonra hover / odaklandığınızda görünür. (Bu, hazırda Chrome-da default davranış). Əgər belədirsə, aşağıdakılardan istifadə edə bilərsiniz:

 <input type="number"/> 

Chrome:

Chrome'un mövcud versiyalarında, bu elementlər üçün -webkit-appearance default (user agent) xüsusiyyəti zaten bir -webkit-appearance . Bir -webkit-appearance aradan qaldırmaq üçün, -webkit-appearance əmlakının dəyərini yalançı siniflər üzrə none dəyişdirməlisiniz ::-webkit-outer-spin-button / ::-webkit-inner-spin-button (default olaraq, bu -webkit-appearance: inner-spin-button ).

 <input type="number" /> 

Qeyd edək ki, margin: 0 Chrome-nun köhnə versiyalarında bir sahəni çıxarmaq üçün istifadə olunur.

Hal-hazırda, bu yazı ilə başlayaraq, daxili spin-button pseudo-class üçün istifadəçi agent stil istifadə olunur burada:

 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; } 
316
14 янв. Cavab yanvarın 14-də Josh Crozier tərəfindən verilir . 2015-01-14 06:34 '15 'də 6:34' de 2015-01-14 06:34

Safari Mobil İstifadəçi İnterfeysi Kodlaşdırma Kılavuzuna əsasən , iPhone brauzerindəki sayısal klavyəni göstərmək üçün aşağıdakılardan istifadə edə bilərsiniz:

118
03 февр. team_steve tərəfindən verilmiş cavab 03 fevral. 2011-02-03 06:43 '11 at 6:43 am 2011-02-03 06:43

Onun yerinə input type="tel" istifadə edin. Rəqəmli bir klaviatura görünür və spin qutuları görünmür. Javascript, css, plugins və ya başqa bir şey tələb etmir.

35
08 марта '13 в 1:52 2013-03-08 01:52 cavab MERT DOĞAN 8 mart '13 'də saat 01:52' da verilir
 input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } //Supports Mozilla input[type=number] { -moz-appearance:textfield; } <input type="number"/> 
19
05 дек. cavab Sreekanth Karini 05 dekabrda verilir. 2016-12-05 14:08 '16 saat 02:08 'da 2016-12-05 14:08

Bu problemə oxşar olan input[type="datetime-local"] ilə bu problemə qoşuldum.

Bu problemləri aradan qaldırmaq üçün bir yol tapdım.

Birincisi, "DevTools → Parametrlər → Ümumi → Öhdəliklər → DOM istifadəçi tenderini göstər» istifadə edərək, xrom kölgə kök xüsusiyyətini aktivləşdirməlisiniz.

Sonra bütün gizli DOM elementlərini , məsələn, <input type="number"> , kölgəli DOM ilə tam elementi görə bilərsiniz:

8
30 дек. Cavab Xiao Hanyu tərəfindən verilir 30 dekabr. 2015-12-30 14:30 '16 saat 14:30 'da, 2015-12-30 14:30

Sadəcə nömrəni daxil etmək üçün saytı çıxarmaq üçün bu CSS əlavə edin.

  input[type='number'] { -moz-appearance:textfield; }  input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 
6
08 авг. Sanjib Debnath 08 aug tərəfindən verilmiş cavab 2018-08-08 12:51 '18 at 12:51 pm 2018-08-08 12:51

 <input id="test" type="number"> 
3
17 февр. Cavab 17 fevralda Prince Sharma tərəfindən verilir . 2017-02-17 11:41 '17 at 11:41 2017-02-17 11:41

İstədiyiniz şey deyil, amma spinboxes ilə WebKit-in diqqətindən ötrü bunu edirəm:

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

Bu, sizə lazım olan şeylərə kömək etmək üçün bir fikir verə bilər.

3
08 окт. Gaurav Oct 08 tərəfindən verilən cavab 2010-10-08 14:10 '10 at 2:10 2010-10-08 14:10

Bu bir siçan üzərində və bir siçan olmadan təklif edəcək ən yaxşı cavabdır

 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; } 
2
22 сент. Cavab Swap-IOS-Android 22 Sentyabr verilir. 2017-09-22 12:20 '17 at 12:20 pm 2017-09-22 12:20

Ubuntu üçün Firefox-da istifadə edin

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

Mənim üçün hiylə etdi.

Əlavə et

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

Mənə gətirib çıxaracaq

Naməlum pseudo-class və ya pseudo-element '-webkit-external-spin-button. Qaydalar pis seçki nəticəsində əlil olur.

Hər dəfə mən çalışdım. Daxili fırlanma düyməsi üçün də eyni.

2
19 нояб. Cavab sonny_boy 19 noyabr verilir 2016-11-19 00:16 '16 'da 0:16' də 2016-11-19 00:16

Yəqin ki, gizlətmək istəmədiyiniz zaman mətn daxil etmək üçün javascript istifadə edərək daxil nömrəni dəyişdirin;

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

mətni daxil edən istifadəçi dayandırmaq;

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

bir counter istifadə etmək istəyirsinizsə, javascript onu geri dəyişəcək;

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

mənim məqsədim üçün yaxşı işləmişdir

1
26 сент. User3121518 tərəfindən verilmiş cavab 26 sentyabr 2016-09-26 15:44 '16 saat 15:44 2016-09-26 15:44

Safari'de bu işi etmək üçün, əlavə etdiyini gördüm! webkit qurmaq üçün vacibdir, ox düyməsini yox edir.

 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {  -webkit-appearance: none !important; margin: 0;  } 

Opera üçün bir həll inkişaf etdirməkdə hələ də problemlərim var.

1
03 июля '14 в 3:45 2014-07-03 03:45 Cavab luckychii tərəfindən verilir 03 iyul 'da 3:45 2014-07-03 03:45

Bu sadə kodu CSS dosyanızda istifadə edə bilərsiniz:

 input[type="number"] { -moz-appearance: textfield; } 
0
20 янв. Əli Bağbanın 20 Yanvarda cavabı 2019-01-20 00:56 '19 'da 0:56' də 2019-01-20 00:56 'də

Spesifikasiyanın son olmadığı materialdan istifadə edirsiniz, buna görə də demək istərdim ki, bunu düzəltmək üçün tamamilə ardıcıl, kross-brauzer yolu olacaqdır.

giriş tipini = "mətn" istifadə edin və bir nömrə olduğundan əmin olmaq üçün javascript çek formasını istifadə edin.

-17
25 сент. cavab GSto verilib 25 sentyabr. 2010-09-25 00:08 '10 at 0:08 2010-09-25 00:08

bağlı digər suallar və ya bir sual