IlmHamroh
JavaScript Full-stack/4-qism. HTML45/86-dars17 daqiqa
Mundarija (33)

Mobil klaviatura va kiritish yordamchilari: inputmode, enterkeyhint va pattern

Qisqacha: inputmode telefonda qaysi klaviatura chiqishini aytadi (raqamli, email, URL), enterkeyhint esa Enter tugmasining yozuvini o'zgartiradi ("Qidirish", "Yuborish"). autocapitalize, autocorrect va spellcheck telefonning "yordam"ini kerak joyda o'chiradi. Telefon va karta raqami uchun type="number" emas, tel yoki inputmode="numeric" ishlatiladi. Formatni esa pattern tekshiradi, masalan +998 90 000 00 00.

Bu darsda

  • type va inputmode farqini tushuntira olasiz va to'g'ri klaviaturani tanlaysiz.
  • Nega telefon, karta va SMS kod uchun type="number" yaramasligini bilasiz.
  • enterkeyhint, autocapitalize, autocorrect va spellcheck ni kerakli joyda ishlatasiz.
  • O'zbek telefon raqami uchun pattern yoza olasiz va uning tuzoqlarini taniysiz.
  • Sahifani o'z telefoningizda ochib, klaviaturani tekshira olasiz.

Oldin bilishingiz kerak: Matnli maydonlar, label: har maydonning nomi.

1. Nega bu kerak?

O'zbekistonda saytlarga kiruvchilarning katta qismi telefondan kiradi. «Bahor» saytiga ham mehmonlar ko'pincha yo'lda, taksida yoki navbatda turib kiradi. Ular joy band qilish formasini bitta qo'l, bitta barmoq bilan to'ldiradi.

Endi tasavvur qiling:

  • Karta raqamini yozasiz — harfli klaviatura chiqadi, har safar raqamlarga o'tasiz.
  • Ismingizni jasur deb yozasiz — telefon uni "tuzatib", Jasper qilib qo'yadi.
  • SMS kodni yozib, Enter bosasiz — hech narsa bo'lmaydi, "Yuborish" tugmasini qidirasiz.

Har biri — bir necha soniya va bir oz asabiylashish. Uchta shunday holat — va mehmon formani yopib, choyxonaga qo'ng'iroq qiladi. Yoki boshqa choyxonaga ketadi.

O'tgan darsda type ning o'zi ko'p ishni hal qildi. Bu darsda telefon klaviaturasini yanada nozik boshqaradigan atributlarni o'rganamiz. Ularning hammasi kompyuterda deyarli ko'rinmaydi — lekin telefonda formani ikki barobar tezlashtiradi.

2. Telefonda qanday tekshiramiz?

DevTools'dagi mobil ko'rinish (device mode, DevTools I darsida ko'rgansiz) ekran o'lchamini o'zgartiradi, lekin ekran klaviaturasini ko'rsatmaydi. Bu darsdagi hamma narsani haqiqiy telefonda tekshirish kerak.

Eng oson yo'l — kompyuter va telefon bitta Wi-Fi tarmog'ida bo'lsin. Loyiha papkasida terminalni oching va npx bilan kichik server ishga tushiring:

bash
npx serve

Terminaldagi ramka ichida ikkita manzil chiqadi (taxminan):

text
- Local:    http://localhost:3000
- Network:  http://192.168.1.5:3000

Network qatoridagi manzilni telefon brauzeriga yozing (sizda raqamlar boshqacha bo'ladi). Bu — kompyuteringizning uy tarmog'idagi IP manzili (IP manzil va port). Network qatori chiqmasa, IP'ni ipconfig (macOS va Linux'da ip a) bilan toping va oxiriga :3000 qo'shing.

  • Windows birinchi marta "Windows Defender Firewall" oynasini ochib, ruxsat so'rashi mumkin. Private networks (xususiy tarmoqlar) uchun ruxsat bering.
  • Ochilmasa: telefon va kompyuter bitta tarmoqdami? Mehmonlar uchun Wi-Fi tarmoqlari qurilmalarni ko'pincha bir-biridan ajratib qo'yadi.
  • Ishingiz tugagach, terminalda Ctrl + C bilan serverni to'xtating.

Maslahat: Live Server ham telefonda ishlaydi. VS Code sozlamalarida liveServer.settings.useLocalIp ni yoqsangiz, u 127.0.0.1 o'rniga tarmoqdagi IP bilan ochiladi. Qaysi usul qulay bo'lsa, shuni tanlang.

3. inputmode: qaysi klaviatura chiqsin

3.1 type va inputmode farqi

O'tgan darsda type="tel" raqamli klaviatura chiqarishini ko'rdik. Lekin type uchta ishni birga qiladi: ma'lumot turini aytadi, tekshiruvni yoqadi va klaviaturani tanlaydi. Ba'zan bizga faqat klaviatura kerak.

Misol: bank kartasi raqami. U — tel emas (telefon raqami emas), email ham emas. Turi — oddiy matn. Lekin klaviatura raqamli bo'lishi kerak.

inputmode — faqat klaviaturani tanlaydigan atribut. U tekshiruvga ham, qiymatga ham tegmaydi:

html
<label for="karta">Karta raqami</label>
<input type="text" id="karta" name="karta"
       inputmode="numeric">

Maydon text bo'lib qoladi, lekin telefonda katta raqamli klaviatura chiqadi.

O'xshatish: type — do'kon bo'limi (poyabzal bo'limi o'zining sotuvchisi, o'lchovi va qoidalari bilan). inputmode — faqat peshtaxtaga qo'yilgan asbob. Asbobni almashtirish uchun butun bo'limni ko'chirish shart emas.

3.2 Qiymatlar

inputmode Klaviatura Qachon
text Oddiy harfli (standart) Ism, izoh
numeric Faqat 0–9 raqamlar Karta, SMS kod, pasport raqami
decimal Raqamlar + nuqta yoki vergul Narx, og'irlik: 2,5 kg
tel Telefon terish: 0–9, +, *, # Telefon raqami
email Harflar + @ va . Email
url Harflar + / va .com Veb-manzil
search Harflar, Enter o'rnida "Qidirish" Qidiruv
none Klaviatura chiqmaydi Sahifa o'z klaviaturasini chizganda

none ni ehtiyot bilan ishlating: agar sahifada o'zingizning ekran klaviaturangiz bo'lmasa, foydalanuvchi umuman yoza olmay qoladi.

Kompyuterda inputmode hech narsani o'zgartirmaydi — jismoniy klaviatura doim bir xil. Shuning uchun u hech kimga zarar qilmaydi, faqat telefon egalariga yordam beradi.

3.3 Qachon type, qachon inputmode?

Qoida:

  1. Mos type bo'lsa (email, tel, url, search) — type ni ishlating. Klaviatura o'zi to'g'ri chiqadi, inputmode qo'shish shart emas.
  2. Mos type yo'q, lekin maxsus klaviatura kerak — type="text" + inputmode.

Tekshirib ko'ring: Qaysi biri to'g'ri: <input type="email" inputmode="email"> yoki <input type="text" inputmode="email">?

Javob

Birinchisi ishlaydi, lekin inputmode ortiqcha: type="email" klaviaturani o'zi tanlaydi. Ikkinchisi xato tanlov: email klaviaturasi bor, lekin brauzer formatni tekshirmaydi. To'g'risi — oddiy <input type="email">: tekshiruv ham, klaviatura ham bor.

4. Nega type="number" telefon va karta uchun emas

"Karta raqami — raqamlar-ku, demak type="number"" — bu juda keng tarqalgan fikr. Lekin number son uchun, ya'ni hisoblanadigan qiymat uchun yaratilgan. U bilan telefon yoki karta raqami yozsangiz:

  • Strelkalar. Kompyuterda maydon ichida ▲▼ tugmalari chiqadi. Bosib yuborsangiz, karta raqami bittaga oshadi.
  • Sichqoncha g'ildiragi. Chrome'da maydon faol turganda g'ildirakni aylantirsangiz, qiymat o'zgaradi. Foydalanuvchi sahifani pastga aylantiryapman deb o'ylaydi — telefon raqami esa o'zgarib ketadi.
  • Bo'sh joy va + qabul qilinmaydi. 8600 1234 5678 9012 va +998 90 000 00 00 — son emas. Brauzer ularni noto'g'ri qiymat deb hisoblaydi va forma yuborilmaydi.
  • e harfi ruxsat etilgan. 1e5 — matematikada 100 000 degani, shuning uchun brauzer e ni yozishga ruxsat beradi.
  • maxlength va pattern ishlamaydi. Ular son maydoniga umuman qo'llanilmaydi.

Oltin qoida: undan hisob-kitob qilmasangiz — bu son emas. Karta raqamini hech kim ikkiga ko'paytirmaydi. Telefon raqamidan o'rtacha hisoblanmaydi. Bular — raqamlardan iborat matn.

Ma'lumot Hisoblanadimi? To'g'ri tanlov
Telefon raqami Yo'q type="tel"
Karta raqami Yo'q type="text" inputmode="numeric"
SMS kod Yo'q type="text" inputmode="numeric"
Odam soni, miqdor Ha type="number"

«Bahor» formasidagi "Necha kishi" — haqiqiy son: 4 kishiga yana 2 kishi qo'shish, stol sig'imi bilan solishtirish mumkin. Uning uchun type="number" o'rinli — Son, sana, vaqt va rang maydonlari darsida aynan shuni qilamiz.

Maslahat: Buyuk Britaniya hukumatining GOV.UK dizayn tizimi — dunyodagi eng ko'p o'rganiladigan formalar qo'llanmalaridan biri. U ham 2020-yilda raqamli maydonlar uchun type="number" dan voz kechib, type="text" inputmode="numeric" ga o'tgan — aynan shu sabablar tufayli.

5. enterkeyhint: Enter tugmasining yozuvi

Telefon klaviaturasining pastki o'ng burchagidagi katta tugma — Enter. Uning yozuvini enterkeyhint atributi belgilaydi:

enterkeyhint Tugmada (taxminan) Qachon
enter ↵ (yangi qator) Ko'p qatorli matn
done "Tayyor" Oxirgi maydon, klaviatura yopilsin
go "O'tish" Kiritilgan manzilga o'tish
next "Keyingi" Keyingi maydonga o'tish
previous "Oldingi" Oldingi maydonga qaytish
search "Qidirish" yoki lupa Qidiruv
send "Yuborish" Xabar yuborish

Aniq yozuv va belgi telefon va klaviatura dasturiga bog'liq. Telefon tili o'zbekcha bo'lsa — o'zbekcha, ruscha bo'lsa — ruscha.

html
<label for="xabar">Administratorga savol</label>
<input type="text" id="xabar" name="xabar"
       enterkeyhint="send">

Diqqat: enterkeyhint faqat yozuvni o'zgartiradi, xatti-harakatni emas. Tugma bosilganda brauzer odatdagidek ishlaydi: bir qatorli maydonda forma yuboriladi (yashirin yuborish), textarea da yangi qator qo'shiladi. Masalan, next yozib qo'ysangiz, lekin tugma formani yuborsa — foydalanuvchi aldanadi. Yozuv har doim bosilganda haqiqatan nima bo'lishiga mos kelsin. Tugmaga boshqa vazifa berishni JavaScript bilan, Forma qiymatlarini o'qish darsidan keyin qila olasiz.

Eng ko'p ishlatiladigan holatlar: qidiruv maydonida search, bitta maydonli formada (SMS kod, chat xabari) send, done yoki go.

6. Telefonning "yordamchilari"ni boshqarish

Telefon klaviaturasi sizga yordam berishga harakat qiladi: gap boshini bosh harf qiladi, "xato" so'zlarni tuzatadi, imloni tekshiradi. Izoh yozganda bu qulay. Ism, login yoki kod yozganda esa xalaqit beradi.

6.1 autocapitalize: bosh harflar

Qiymat Nima qiladi Qachon
sentences (yoki on) Har gapning birinchi harfi katta Izoh, xabar (standart)
words Har so'zning birinchi harfi katta Ism-familiya: Ali Valiyev
characters Hamma harf katta Pasport seriyasi, mashina raqami
none (yoki off) Hech qaysi harf katta bo'lmaydi Login, promokod
html
<label for="seriya">Pasport seriyasi va raqami</label>
<input type="text" id="seriya" name="pasport"
       autocapitalize="characters" spellcheck="false">

autocapitalize faqat ekran klaviaturasiga ta'sir qiladi. Kompyuterda foydalanuvchi baribir kichik harf bilan yozishi mumkin. Shuning uchun u — qulaylik, qoida emas. email, url va password maydonlarida brauzer bosh harfni o'zi o'chiradi, u yerga yozish shart emas.

6.2 autocorrect: avtotuzatish

Telefonning avtotuzatishi o'zbekcha ismlarni ko'pincha "tanimaydi" va o'zi bilgan so'zga almashtiradi. autocorrect="off" buni o'chiradi:

html
<input type="text" id="login" name="login"
       autocapitalize="none" autocorrect="off"
       spellcheck="false">

Bu atributni asosan iPhone'dagi Safari qo'llaydi, boshqa brauzerlarda qo'llab-quvvatlash hali to'liq emas. Yangi imkoniyatni ishlatishdan oldin caniuse va Baseline da tekshirish odatini eslang. Qo'llamagan brauzer uni shunchaki e'tiborsiz qoldiradi — zarar yo'q.

6.3 spellcheck: imlo tekshiruvi

Brauzer imloni tekshirib, "xato" so'zlarning tagiga qizil to'lqinli chiziq tortadi. Brauzer lug'atida o'zbek tili bo'lmasa, deyarli har bir o'zbekcha so'z "xato" bo'lib chiqadi. Ism, manzil va kodlarda bu chalg'itadi:

html
<input type="text" id="ism" name="ism" spellcheck="false">

spellcheck ning qiymati — true yoki false. U faqat forma maydonlarida emas, istalgan tahrirlanadigan elementda ishlaydi (Global atributlar darsida ko'ramiz).

Uzun izoh (textarea) uchun odatda uni o'chirmaymiz — foydalanuvchi o'zi tanlasin.

Tekshirib ko'ring: Promokod maydoni: BAHOR2026 kabi kodlar. Qaysi uch atributni qo'shasiz?

Javob

autocapitalize="characters" — kod katta harflarda; autocorrect="off" — telefon uni "tuzatmasin"; spellcheck="false" — kod so'z emas, qizil chiziq kerak emas. Kod faqat katta harf va raqamlardan iborat bo'lsa ham, inputmode ni o'zgartirmaymiz: harflar ham kerak.

7. pattern: o'zbek telefon raqamini tekshirish

7.1 Muammo

O'tgan darsda type="tel" hech narsani tekshirmasligini ko'rdik. Mehmon 90 000 deb yozib yuborsa — administrator qo'ng'iroq qila olmaydi. Bizga "faqat +998 va 9 ta raqam" degan qoida kerak.

pattern atributi aynan shunday qoidani yozish imkonini beradi. Qoida regular expression (regex, "muntazam ifoda") tilida yoziladi — matn shaklini tasvirlaydigan kichik til. Unga Fayl va matn qidirish darsida qisqa kirgan edik. To'liq esa JavaScript qismida, RegExp asoslari darsida o'rganasiz. Hozir bitta tayyor namunani tushunish kifoya.

7.2 Namuna

html
<label for="telefon">Telefon</label>
<input type="tel" id="telefon" name="telefon"
       placeholder="+998 90 000 00 00"
       pattern="\+998 ?\d{2} ?\d{3} ?\d{2} ?\d{2}"
       title="+998 va 9 ta raqam: +998 90 000 00 00">

Namunani bo'laklab o'qiymiz:

Bo'lak Ma'nosi
\+ + belgisining o'zi. \ — "bu belgining maxsus ma'nosini o'chir"
998 Aynan 998
? Bo'sh joy — bo'lishi ham, bo'lmasligi ham mumkin (? — "ixtiyoriy")
\d{2} Ikkita raqam (\d — istalgan raqam 0–9, {2} — 2 marta)
\d{3} Uchta raqam

Natija — +998, keyin 2 + 3 + 2 + 2 = 9 ta raqam, orasida ixtiyoriy bo'sh joylar.

Kiritilgan qiymat Natija
+998 90 000 00 00 o'tadi
+998900000000 o'tadi
998 90 000 00 00 + yo'q
+998 90 000 00 0 bitta raqam kam
+998-90-000-00-00 chiziqcha ruxsat etilmagan

7.3 Qanday ishlaydi

  • Butun qiymat tekshiriladi. Brauzer qoidani qiymatning boshidan oxirigacha qo'llaydi. +998 90 000 00 00 dan keyin — : oxirida ortiqcha matn bor.
  • Tekshiruv yuborishda. Yozayotganda hech narsa bo'lmaydi. "Joy band qilish" bosilganda qiymat mos kelmasa, forma yuborilmaydi va Chrome xabar chiqaradi:
text
Please match the requested format.

Tarjimasi: "So'ralgan formatga moslang." Xabar tagida title atributidagi matn ham chiqadi — shuning uchun title ga formatni aniq yozdik. Bu xabar foydalanuvchiga ko'p narsa aytmaydi, shuning uchun formatni label yoki placeholder'da ham ko'rsating.

  • Bo'sh maydon tekshirilmaydi. Maydonni umuman to'ldirmasangiz, pattern jim turadi. Maydonni majburiy qilish uchun required kerak — uni va brauzer tekshiruvining boshqa imkoniyatlarini Brauzer validatsiyasi darsida o'rganamiz.
  • Qayerda ishlaydi. text, tel, email, url, password va search maydonlarida. textarea va number da pattern yo'q.

Tekshirib ko'ring: Mehmon avtoto'ldirishdan foydalandi va maydonga +998 90 000 00 00 tushdi (boshida bo'sh joy bor). Forma yuboriladimi?

Javob

Yo'q. Namuna + bilan boshlanishini talab qiladi, qiymat esa bo'sh joy bilan boshlangan. email maydonidan farqli, tel boshidagi bo'sh joyni o'zi olib tashlamaydi. Foydalanuvchi xatoni ko'rmaydi ham — bo'sh joy ko'zga tashlanmaydi. Yechim: namunani boshida bo'sh joyga ruxsat beradigan qilish yoki (yaxshisi) bunday ortiqcha belgilarni server tomonda tozalash.

7.4 Tuzoq: yangi regex qoidalari

2023-yildan beri brauzerlar pattern ni regex'ning yangi, qat'iyroq rejimida (v flag) o'qiydi. Bu rejimda kvadrat qavs ichidagi ba'zi belgilar \ bilan yozilishi shart. Masalan, "bo'sh joy yoki chiziqcha" qoidasi:

html
<!-- ❌ Brauzer bu namunani umuman qabul qilmaydi -->
<input type="tel" name="telefon" aria-label="Telefon"
       pattern="\+998[ -]?\d{2}[ -]?\d{3}[ -]?\d{2}[ -]?\d{2}">

Eng yomoni — brauzer xato bermaydi. U noto'g'ri namunani jimgina e'tiborsiz qoldiradi va istalgan qiymatni o'tkazib yuboradi. Faqat Console'da Pattern attribute value ... is not a valid regular expression ("pattern qiymati to'g'ri regex emas") bilan boshlanadigan ogohlantirish chiqadi.

html
<!-- ✅ Chiziqcha oldida \ -->
<input type="tel" name="telefon" aria-label="Telefon"
       pattern="\+998[ \-]?\d{2}[ \-]?\d{3}[ \-]?\d{2}[ \-]?\d{2}">

Endi +998-90-000-00-00 ham, +998 90 000 00 00 ham o'tadi. Qoida: pattern yozgach, albatta noto'g'ri qiymat bilan sinab ko'ring. Forma xatoni ushlamasa — Console'ni oching.

8. «Bahor»: telefonga tayyor forma

Joy band qilish formasiga bu darsdagi yordamchilarni qo'shamiz:

html
<form method="post">
  <div>
    <label for="ism">Ismingiz</label>
    <input type="text" id="ism" name="ism" maxlength="50"
           autocapitalize="words" spellcheck="false">
  </div>
  <div>
    <label for="telefon">Telefon (+998 90 000 00 00)</label>
    <input type="tel" id="telefon" name="telefon"
           pattern="\+998 ?\d{2} ?\d{3} ?\d{2} ?\d{2}"
           title="+998 va 9 ta raqam: +998 90 000 00 00">
  </div>
  <div>
    <label for="email">Email (ixtiyoriy, tasdiq xati uchun)</label>
    <input type="email" id="email" name="email"
           spellcheck="false">
  </div>
  <div>
    <label for="odam">Necha kishi</label>
    <input type="text" id="odam" name="odam">
  </div>
  <div>
    <label for="izoh">Qo'shimcha istaklar (200 belgigacha)</label>
    <textarea id="izoh" name="izoh" rows="3"
              maxlength="200"></textarea>
  </div>
  <button type="submit">Joy band qilish</button>
</form>

Nima o'zgardi:

  • Ism: har so'z bosh harf bilan (Ali Valiyev), imlo tekshiruvi o'chiq.
  • Telefon: pattern va title qo'shildi. Format placeholder'dan label'ga ko'chdi — endi u yozishni boshlaganda ham ko'rinib turadi (placeholder tuzog'i).
  • Email: imlo tekshiruvi o'chiq. type="email" bosh harfni o'zi o'chiradi.
  • Necha kishi: hozircha o'zgarmadi — keyingi darsda type="number" bo'ladi.

Band qilgandan keyin choyxona mehmonga SMS kod yuboradi deylik. Kod kiritish sahifasi — bitta maydonli forma:

html
<form method="post">
  <label for="kod">SMS orqali kelgan 6 xonali kod</label>
  <input type="text" id="kod" name="kod"
         inputmode="numeric" pattern="\d{6}"
         autocomplete="one-time-code" enterkeyhint="done">
  <button type="submit">Tasdiqlash</button>
</form>

Raqamli klaviatura, aynan 6 ta raqam, Enter tugmasida "Tayyor" — va bosilganda forma haqiqatan yuboriladi (bitta maydonli forma). Oxirgi atribut — autocomplete="one-time-code" — telefonga "bu SMS kod maydoni" deydi: iPhone va ko'p Android telefonlar kelgan SMS'dagi kodni klaviatura ustida o'zi taklif qiladi. Bu atributni autocomplete darsida batafsil ko'ramiz.

9. Hujumchi nigohi

Bu darsdagi hamma atribut — foydalanuvchiga yordam. Hujumchi uchun ular yo'q:

  • pattern ni o'chirish. DevTools'da atributni o'chirib yoki curl bilan so'rov yozib, telefon o'rniga istalgan matnni yuborish mumkin: telefon=<script>.... Telefon raqamini server o'zi tekshiradi — aynan shu yoki shunga o'xshash qoida bilan.
  • inputmode cheklov emas. Raqamli klaviatura chiqsa ham, foydalanuvchi matnni nusxalab qo'yishi yoki kompyuterda harf yozishi mumkin. inputmode="numeric" bor maydondan harf kelishi — oddiy holat.
  • Imlo tekshiruvi va maxfiylik. Chrome'ning "kengaytirilgan imlo tekshiruvi" (Enhanced spell check) yoqilgan bo'lsa, maydonga yozilgan matn tekshirish uchun Google serverlariga yuboriladi. Tadqiqotchilar 2022-yilda bu yo'l bilan formalardagi maxfiy ma'lumotlar (hatto "parolni ko'rsatish" bosilgandagi parollar) tashqi serverga ketishini ko'rsatishgan. Maxfiy maydonlarda — pasport, karta, kod, parolni ko'rsatish holatida — spellcheck="false" yozing.

10. Ko'p uchraydigan xatolar

10.1 Mavjud bo'lmagan qiymat

inputmode="number", inputmode="phone", enterkeyhint="submit" — bunday qiymatlar yo'q. Brauzer ularni e'tiborsiz qoldiradi va standart klaviaturani chiqaradi. Tuzatish: 3.2 va 5-bo'limdagi jadvallardan aniq qiymat: numeric, tel, send. Validator noto'g'ri qiymatni ko'rsatadi.

10.2 Telefon uchun type="number"

4-bo'limda ko'rdik: strelkalar, g'ildirak, + va bo'sh joy qabul qilinmaydi. Tuzatish: telefon — type="tel", karta va kod — type="text" inputmode="numeric".

10.3 Yolg'onchi Enter

enterkeyhint="next", lekin tugma formani yuboradi. Yoki send, lekin maydon textarea — tugma yangi qator qo'shadi. Tuzatish: yozuv doim bosilgandagi haqiqiy natijaga mos bo'lsin.

10.4 Ishlamayotgan pattern

7.4-bo'limdagi [ -] kabi xato namunani brauzer jim tashlab yuboradi. Tuzatish: har bir pattern ni noto'g'ri qiymat bilan sinang; forma o'tkazib yuborsa, Console'ni tekshiring. Kvadrat qavs ichidagi -, (, ), [, ], {, }, /, | oldiga \ qo'ying.

10.5 Faqat kompyuterda sinash

DevTools'ning mobil ko'rinishida hammasi "ishlaydi", chunki klaviatura umuman chiqmaydi. Tuzatish: 2-bo'limdagi usul bilan haqiqiy telefonda, imkon bo'lsa ham Android, ham iPhone'da sinang.

11. Mashqlar

1-mashq (oson): Klaviaturani tanlang

Har bir maydon uchun type va (kerak bo'lsa) inputmode ni yozing:

  1. Uzcard karta raqami.
  2. Taomning og'irligi, kilogrammda (1,5).
  3. Choyxona administratorining telefoni.
  4. Buyurtma soni (nechta porsiya osh).
Yechim
  1. type="text" inputmode="numeric" — karta raqami hisoblanmaydi, bo'sh joylar bo'lishi mumkin.
  2. type="text" inputmode="decimal" — kasr ajratgichli raqamli klaviatura. (Og'irlik — haqiqiy son, shuning uchun keyingi darsda type="number" bilan step ni ham ko'rasiz.)
  3. type="tel" — inputmode shart emas.
  4. type="number" — porsiyalar soni haqiqiy son, uni qo'shish va ko'paytirish mumkin. Keyingi darsda o'rganamiz.

2-mashq (o'rta): Pasport maydoni

O'zbekiston pasporti: 2 ta lotin bosh harfi va 7 ta raqam, masalan AA1234567. Maydon yozing:

  • Telefonda bosh harflar avtomatik yozilsin.
  • Avtotuzatish va imlo tekshiruvi o'chiq bo'lsin.
  • pattern formatni tekshirsin. Ishora: [A-Z] — "A dan Z gacha bitta bosh harf", {2} — ikki marta.
Yechim
html
<label for="pasport">Pasport seriyasi va raqami</label>
<input type="text" id="pasport" name="pasport"
       autocapitalize="characters" autocorrect="off"
       spellcheck="false" pattern="[A-Z]{2}\d{7}"
       title="2 ta bosh harf va 7 ta raqam: AA1234567">

AB1234567 o'tadi, ab1234567 esa yo'q. Lekin kompyuterda foydalanuvchi kichik harf bilan yozishi mumkin — autocapitalize faqat telefon klaviaturasiga ta'sir qiladi. Shuning uchun ko'p saytlar [A-Za-z]{2}\d{7} ni qabul qiladi, harflarni esa serverda katta qiladi. Qaysi yo'lni tanlasangiz ham, format label yoki title da aniq yozilsin.

3-mashq (qiyin): Telefonda to'liq tekshiruv

  1. 8-bo'limdagi «Bahor» formasini bron/index.html ga yozing.
  2. npx serve bilan sahifani telefoningizda oching.
  3. Har bir maydonga bosing va klaviatura turini, Enter tugmasi yozuvini yozib oling.
  4. Telefon maydoniga ataylab +998 90 000 00 (bitta raqam kam) yozib yuboring. Nima bo'ldi?
  5. Namunani 7.4-bo'limdagi variantga almashtiring va yana yuboring. Farq nima? Kompyuterdagi Console nima deydi?
Yechim
  1. Ism — harfli klaviatura, har so'z bosh harf bilan. Telefon — raqamli (telefon terish). Email — @ tugmali. Necha kishi — oddiy harfli (keyingi darsda tuzatiladi). Izoh — harfli, Enter — yangi qator. Bir qatorli maydonlarda Enter yozuvi telefon va brauzerga qarab farq qiladi — shuning uchun biz enterkeyhint ni bu yerda majburlamadik.
  2. Forma yuborilmadi: "So'ralgan formatga moslang" xabari va title dagi matn chiqdi.
  3. namuna bilan noto'g'ri raqam ham yuborildi — brauzer namunani tashlab yubordi. Kompyuterda sahifani ochib, Console'ni ko'rsangiz, Pattern attribute value ... is not a valid regular expression ogohlantirishi turadi. [ \-] ga tuzatgach, tekshiruv qaytadi.

Bu mashqning asosiy xulosasi: forma "ishlayapti" degani — tekshiruv ishlayapti degani emas. Har bir qoidani noto'g'ri qiymat bilan sinang.

12. Real ishda

  • Mobil konversiya. Uzum, Yandex Go, Payme kabi ilovalarning veb-versiyalarida karta, telefon va SMS kod maydonlari aynan shu atributlar bilan yoziladi. To'g'ri klaviatura — kam xato va kam tashlab ketilgan buyurtma.
  • To'lov formalari. Karta raqami uchun inputmode="numeric" va autocomplete="cc-number" — standart. type="number" ni code review'da darhol tuzatishni so'rashadi.
  • Frontend va backend. pattern dagi qoida serverda ham bo'lishi kerak. Ko'p jamoalar bitta regex'ni ikkala joyda ishlatadi — shunda brauzer va server bir xil qarorga keladi.
  • Intervyuda: "inputmode va type farqi nima?" va "Nega telefon uchun type="number" yaramaydi?" — ikkalasi ham frontend intervyularida uchraydi.

Xulosa

  • type — ma'lumot turi, tekshiruv va klaviatura; inputmode — faqat klaviatura.
  • Hisoblanmaydigan raqamlar (telefon, karta, kod) — son emas: tel yoki text + inputmode="numeric".
  • enterkeyhint faqat Enter yozuvini o'zgartiradi — yozuv haqiqiy natijaga mos bo'lsin.
  • autocapitalize, autocorrect, spellcheck — ism, kod va maxfiy maydonlarda telefonning "yordami"ni o'chiradi.
  • pattern butun qiymatni tekshiradi, bo'sh maydonni o'tkazib yuboradi; noto'g'ri namuna jim e'tiborsiz qolinadi.
  • Hamma narsani haqiqiy telefonda sinang; serverdagi tekshiruv baribir majburiy.

Keyingi dars: Son, sana, vaqt va rang maydonlari — «Bahor» formasiga odam soni, band qilish sanasi va vaqtini to'g'ri maydonlar bilan qo'shamiz.

Manbalar

  • MDN: "inputmode", "enterkeyhint", "autocapitalize", "spellcheck" global atributlari va "HTML attribute: pattern" — developer.mozilla.org
  • WHATWG HTML: "User interaction: input modalities" — html.spec.whatwg.org
  • GOV.UK Design System: "Text input — numbers" — design-system.service.gov.uk
  • web.dev: "Sign-in form best practices" va "Payment and address form best practices" — web.dev
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
Mobil klaviatura va kiritish yordamchilari: inputmode, enterkeyhint va pattern — IlmHamroh