HTML tabindex va contenteditable: fokus va tahrir atributlari

Qisqacha: tabindex="0" elementni Tab tartibiga qo'shadi, tabindex="-1" esa uni tartibdan chiqaradi, lekin JavaScript fokus bera oladi. Musbat tabindex (1, 2, 3…) tartibni buzadi — uni ishlatmang. contenteditable istalgan elementni tahrirlanadigan qiladi, plaintext-only qiymati esa faqat oddiy matnga ruxsat beradi. accesskey klaviatura yorlig'i beradi, lekin ko'p muammosi bor va kam ishlatiladi.

Bu darsda

• Qaysi elementlar o'zi fokus olishini va qaysilari olmasligini bilasiz.
• tabindex ning 0, -1 va musbat qiymatlari farqini tushuntira olasiz.
• autofocus va accesskey ni qachon ishlatish mumkinligini va qachon zararli ekanini ajratasiz.
• contenteditable bilan tahrirlanadigan blok yasaysiz va uning chegaralarini bilasiz.
• Tahrirlanadigan blokda spellcheck va enterkeyhint ni to'g'ri qo'yasiz.

Oldin bilishingiz kerak: Global atributlar, Qulay va accessible forma, Maydon holatlari va yashirin maydonlar.

1. Nega bu kerak?

«Bahor» saytiga har xil odamlar kiradi. Ko'zi ojiz Malika ekran o'quvchi bilan ishlaydi. Qo'lini sindirib olgan Bobur vaqtincha sichqonchani ushlay olmaydi — faqat klaviaturadan foydalanadi. Choyxona kassiri esa buyurtmalarni tez kiritish uchun Tab va Enter dan foydalanadi.

Ularning hammasi uchun bitta savol muhim: Tab bosilganda qaysi element navbatdagi bo'ladi? Buni HTML hal qiladi. Global atributlar darsida inert bilan butun bo'limni fokusdan chiqargan edik. Bu darsda aniqroq vosita — tabindex bilan tanishamiz.

Darsning ikkinchi yarmida boshqa savol: sahifadagi matnni to'g'ridan-to'g'ri tahrirlash mumkinmi? Masalan, oshpaz "Bugungi maxsus taom" yozuvini o'zi o'zgartirsa. Bunga contenteditable javob beradi.

2. Fokus: qisqa eslatma

2.1 Fokus nima

Qulay forma darsida fokus bilan ishlagan edik. Endi uni aniq ta'riflaymiz.

Fokus (focus) — klaviatura bosishlarini hozir qabul qilayotgan element. Bir paytda faqat bitta element fokusda bo'ladi. Xuddi majlisdagi mikrofon kabi: kimning qo'lida bo'lsa, faqat o'sha gapiradi.

Tab fokusni keyingi elementga, Shift + Tab esa oldingisiga o'tkazadi. Tartib — HTML koddagi tartib.

2.2 Qaysi elementlar o'zi fokus oladi

Hamma element ham Tab bilan tanlanmaydi. Brauzer faqat harakat qilish mumkin bo'lgan elementlarni tanlaydi:

Qoida mantiqiy: paragrafni "bosib" hech narsa bo'lmaydi, shuning uchun unga fokus kerak emas.

2.3 O'zingiz sinab ko'ring

Istalgan sahifani oching, F12 bosing va Console'ga yozing:

document.activeElement

Konsol hozir fokusda turgan elementni ko'rsatadi. Sahifada hech narsa tanlanmagan bo'lsa — body. Endi sahifaga qayting, bir necha marta Tab bosing va buyruqni qayta yozing. Bu buyruq JavaScript'dan olingan — uni hozir yodlash shart emas, faqat "rentgen" sifatida ishlating.

Tekshirib ko'ring: <a>Menyu</a> havolasiga Tab bilan yetib bo'ladimi?

3. tabindex: uch xil qiymat

tabindex — global atribut. Qiymati butun son bo'ladi va uni uch guruhga bo'lamiz: 0, manfiy (-1) va musbat (1, 2, 3…).

3.1 tabindex="0" — tartibga qo'shish

tabindex="0" odatda fokus olmaydigan elementni Tab tartibiga qo'shadi. U o'z joyiga, kod tartibiga mos tushadi.

Qachon kerak? «Bahor» menyusida narxlar jadvali keng. Telefon ekranida u sig'maydi va yon tomonga aylantiriladi. Sichqonchali odam uni g'ildirak bilan suradi. Klaviaturadagi odam-chi? Unga jadval o'ramini fokuslash kerak — shunda u strelka tugmalari bilan aylantiradi:

<div class="jadval-oynasi" tabindex="0">
  <table>
    <caption>Narxlar (so'm)</caption>
    <tbody>
      <tr><th>Taom</th><th>1 porsiya</th><th>Qozon</th></tr>
      <tr><td>Osh</td><td>35 000</td><td>300 000</td></tr>
    </tbody>
  </table>
</div>

Bunday o'ramga ekran o'quvchi uchun nom ham beriladi. Buni ARIA asoslari darsida ko'ramiz.

3.2 tabindex="0" bilan "soxta tugma" — yo'q

Boshlovchilar div ga tabindex="0" qo'yib, uni tugma qilmoqchi bo'ladi:

<!-- ❌ -->
<div class="tugma" tabindex="0">Buyurtma berish</div>

<!-- ✅ -->
<button type="button">Buyurtma berish</button>

div fokus oladi, lekin shu bilan tamom. Enter yoki Space bosilsa, hech narsa bo'lmaydi. Ekran o'quvchi uni "tugma" deb e'lon qilmaydi. Haqiqiy button da bularning hammasi bepul keladi — Tugma yoki havola darsida ko'rganimizdek.

3.3 tabindex="-1" — tartibdan chiqarish

tabindex="-1" elementni Tab tartibidan chiqaradi. Lekin u baribir fokus olishi mumkin — ikki yo'l bilan:

• sichqoncha yoki barmoq bilan bosilganda;
• JavaScript focus() buyrug'i bilan.

Qachon kerak? Mana uchta holat:

1. Honeypot maydoni. Forma xavfsizligi darsida botlar uchun "tuzoq" maydonga tabindex="-1" qo'ygan edik. Halol mehmon Tab bosganda unga tushib qolmaydi.
2. Xatolar ro'yxati. Forma yuborilgach, JavaScript fokusni "3 ta xato bor" sarlavhasiga ko'chiradi. Sarlavha odatda fokus olmaydi — tabindex="-1" bunga ruxsat beradi.
3. Dialog ichidagi matn. Oyna ochilganda fokus birinchi tugmaga emas, sarlavhaga tushishi kerak bo'lsa.

<h2 id="xatolar" tabindex="-1">Formada 2 ta xato bor</h2>

Keyinroq JavaScript fokusni shu sarlavhaga ko'chiradi (Fokus hodisalari). Ekran o'quvchi esa sarlavhani darhol o'qib beradi.

3.4 tabindex="-1" — "o'chirgich" emas

Muhim farq. tabindex="-1" qo'yilgan tugma:

• sichqoncha bilan baribir bosiladi;
• ekran o'quvchi uni baribir topadi va o'qiydi;
• faqat Tab uni sakrab o'tadi.

Uning ichidagi elementlarga esa umuman ta'sir qilmaydi. div tabindex="-1" ichidagi havolalar Tab bilan tanlanaveradi. Butun bo'limni o'chirish kerak bo'lsa — inert, forma maydoni uchun — disabled.

3.5 Musbat tabindex — tuzoq

tabindex="1", "2", "3" kabi qiymatlar ham bor. Ular tartibni qo'lda belgilaydi. Birinchi qarashda qulay tuyuladi. Keling, nima bo'lishini ko'ramiz:

<!-- ❌ -->
<a href="index.html">Bosh sahifa</a>
<label for="ism">Ism</label>
<input type="text" id="ism" name="ism" tabindex="2">
<label for="tel">Telefon</label>
<input type="tel" id="tel" name="tel" tabindex="1">
<label for="sana">Sana</label>
<input type="date" id="sana" name="sana">
<button type="submit" tabindex="3">Yuborish</button>

Brauzer avval musbat qiymatlilarni o'sish tartibida yuradi. Keyin qolgan hamma elementlarni kod tartibida. Natija:

Mehmon telefonni ismdan oldin yozadi, sanani esa yuborishdan keyin topadi. Sahifa tepasidagi havola o'rtada chiqadi.

Bundan tashqari, sahifaga har yangi element qo'shilganda raqamlarni qaytadan tartiblash kerak bo'ladi. Shuning uchun qoida qat'iy: faqat 0 va -1. Tartibni o'zgartirmoqchi bo'lsangiz — kodni o'zini to'g'ri tartibda yozing.

Bo'sh joyni to'ldiring: elementni Tab tartibiga qo'shadigan qiymat — tabindex="".

Tekshirib ko'ring: Kassir panelida "Chek chiqarish" tugmasiga tabindex="1" qo'yildi, qolganlarida tabindex yo'q. Kassir sahifani ochib Tab bossa, fokus qayerga tushadi?

4. autofocus: yangi qirralar

Maydon holatlari darsida autofocus bilan tanishgan edik: sahifa ochilishi bilan fokus shu maydonga tushadi. Endi uch qo'shimcha.

Birinchisi — u global. Faqat input da emas, fokus oladigan istalgan elementda ishlaydi: button da, tabindex li elementda. Masalan, dialog ochilganda fokus "Bekor qilish" tugmasiga tushsin:

<dialog id="tasdiq">
  <p>Bronni bekor qilasizmi?</p>
  <button type="button" autofocus>Yo'q, qoldirish</button>
  <button type="button">Ha, bekor qilish</button>
</dialog>

Xavfli amalda fokus "xavfsiz" tugmada tursin. Mehmon beixtiyor Enter bossa, bron saqlanib qoladi.

Ikkinchisi — bittadan ko'p bo'lmaydi. Sahifada bitta, har bir dialog yoki popover ichida ham bittadan. Ikkita autofocus bo'lsa, W3C validatori shunday deydi:

Error: There must not be two elements with the same "nearest ancestor autofocus scoping root element" that both have the “autofocus” attribute specified.

Tarjimasi: "Bir xil 'eng yaqin autofocus doirasi'ga tegishli ikkita elementda autofocus bo'lmasligi kerak." Uzun xabar, lekin ma'nosi oddiy: bitta sahifada (yoki bitta dialogda) faqat bitta autofocus.

Uchinchisi — brauzer fokusni tortib olmaydi. Mehmon sahifa yuklanib bo'lmasdan boshqa maydonga bosib ulgurgan bo'lsa, brauzer autofocus ni e'tiborsiz qoldiradi. Telefonlarda esa xatti-harakat har xil: ba'zilarida klaviatura darhol ochiladi, ba'zilarida yo'q.

5. accesskey: klaviatura yorlig'i va uning tuzoqlari

5.1 Qanday ishlaydi

accesskey elementga klaviatura yorlig'i (shortcut) beradi:

<a href="menyu.html" accesskey="m">Menyu</a>

Endi mehmon maxsus tugmalar birikmasini bossa, brauzer darhol "Menyu" havolasini ishga tushiradi. Qaysi birikma — brauzer va tizimga bog'liq:

5.2 Nega u kam ishlatiladi

Qog'ozda chiroyli. Amalda to'rtta muammo bor:

1. Hech kim bilmaydi. Sayt yorliqlarni ekranda ko'rsatmasa, mehmon ularning borligidan bexabar.
2. To'qnashuv. Alt + D Chrome'da manzil qatorini tanlaydi, Alt + F — menyuni ochadi. Sizning accesskey="d" ingiz brauzerni yoki ekran o'quvchining o'z tugmalarini "bosib ketishi" mumkin.
3. Klaviatura tili. Ko'p o'zbek foydalanuvchilarining klaviaturasida ruscha tartib ham bor. Unda M tugmasi boshqa harf chiqaradi va yorliq kutilmagan ishlashi mumkin.
4. Har xil birikmalar. Yuqoridagi jadvalni eslang — foydalanuvchiga "qaysi tugmani bosing" deb bitta javob berib bo'lmaydi.

Qoida: ommaviy saytlarda accesskey ni ishlatmang. Ichki dasturlarda (masalan, choyxona kassiri paneli) foydali bo'lishi mumkin. Unda yorliqlar ekranda yozilgan bo'lsin va xodimlar ularni bilsin. Haqiqiy, moslashuvchan tezkor tugmalar JavaScript bilan yasaladi (Klaviatura hodisalari).

Tekshirib ko'ring: Sayt qidiruv maydoniga accesskey="f" qo'ydi. Firefox'dan foydalanadigan Windows'dagi mehmon Alt + F bossa, nima bo'ladi?

6. contenteditable: sahifada tahrirlash

6.1 Uch qiymat

Global atributlar darsida contenteditable ni qisqa ko'rgan edik. Uning uchta qiymati bor:

Choyxonaning ichki sahifasi — "oshpaz taxtasi". Unda bugungi eslatma turadi:

<section>
  <h2>Oshpaz taxtasi</h2>
  <div class="eslatma" contenteditable="plaintext-only">
    Bugun norin tayyorlanadi. Go'sht soat 9:00 da keladi.
  </div>
</section>

Eslatmani bosing — kursor paydo bo'ladi va matnni o'zgartira olasiz. Element avtomatik ravishda Tab tartibiga ham qo'shiladi.

6.2 Meros va "himoyalangan" qism

Tahrirlanadigan element ichidagi hamma narsa ham tahrirlanadi. Bir qismini himoya qilish kerak bo'lsa, unga contenteditable="false" beriladi:

<div class="eslatma" contenteditable="true">
  <p>Bugun norin tayyorlanadi.</p>
  <p contenteditable="false">Yozgan: bosh oshpaz Rustam</p>
</div>

Birinchi paragrafni o'zgartirish mumkin. "Yozgan: …" qatori esa qulflangan.

6.3 true va plaintext-only farqi

Mehmon yoki xodim boshqa saytdan matn nusxalab, contenteditable="true" blokka qo'ydi deylik. Matn bilan birga uning bezagi ham keladi: qalin harflar, havolalar, rasmlar, hatto boshqa saytning ranglari. Blok ichida begona HTML to'planib qoladi.

plaintext-only esa faqat harflarni oladi. Oddiy eslatma, izoh yoki chat xabari uchun aynan shu kerak.

plaintext-only 2025-yildan barcha asosiy brauzerlarda ishlaydi. Lekin ba'zi validatorlar uni hali tanimaydi. Masalan, html-validate 11-versiyasi xato beradi, W3C validatori esa qabul qiladi:

error  Attribute "contenteditable" has invalid value "plaintext-only"

Bu validator xatosi, sizning xatoingiz emas. Bunday holatda rasmiy manbani — MDN yoki WHATWG standartini — tekshiring.

6.4 contenteditable nima qilmaydi

Bu yerda boshlovchilar ko'p qoqiladi. Tahrirlanadigan blok — forma maydoni emas:

• Saqlanmaydi. Sahifani yangilasangiz, o'zgarish yo'qoladi. Saqlashni JavaScript bajaradi.
• Forma bilan yuborilmaydi. Unda name yo'q. form ichida bo'lsa ham, server uni olmaydi.
• Tekshirilmaydi. required, maxlength unda ishlamaydi.

Shuning uchun oddiy "ism", "izoh" kabi maydonlar uchun doim input yoki textarea ishlating. contenteditable — matn muharriri, chat oynasi, sahifaning o'zida tahrirlash kabi maxsus vazifalar uchun.

6.5 Butun sahifani tahrirlash: designMode

DevTools Console'da bitta qator butun sahifani tahrirlanadigan qiladi:

document.designMode = "on"

Endi istalgan sarlavha yoki paragrafni bosib o'zgartira olasiz. Bu dizaynerlar uchun qulay: "Taom nomi uzunroq bo'lsa, karta qanday ko'rinadi?" — darhol sinab ko'rasiz. Sahifani yangilasangiz, hammasi asliga qaytadi.

Tekshirib ko'ring: Bron formasida "Qo'shimcha istaklar" uchun textarea o'rniga <div contenteditable> ishlatildi. Mehmon "Deraza yonida" deb yozib, formani yubordi. Server bu istakni oladimi?

7. Tahrirlanadigan blokdagi yordamchi atributlar

Mobil klaviatura darsida spellcheck, enterkeyhint va inputmode ni forma maydonlarida ishlatgan edik. Ular global atributlar — demak, contenteditable blokda ham ishlaydi.

7.1 spellcheck

Tahrirlanadigan blokda brauzer odatda imloni o'zi tekshiradi va "xato" so'zlar tagiga qizil chiziq tortadi. Brauzer lug'atida o'zbek tili bo'lmasa, deyarli har bir so'z "xato" bo'ladi. Yoki blokda kod, promokod, ism bo'lsa — chiziqlar faqat chalg'itadi:

<div contenteditable="plaintext-only" spellcheck="false">
  BAHOR2026 promokodi dushanbagacha amal qiladi.
</div>

7.2 enterkeyhint: takrorlash

enterkeyhint telefon klaviaturasidagi Enter tugmasining yozuvi yoki belgisini o'zgartiradi. Qiymatlari:

Choyxona saytidagi "Oshpazga savol" chat oynasi:

<div class="xabar-oynasi" contenteditable="plaintext-only"
     enterkeyhint="send">
</div>

Eslatma: enterkeyhint faqat yozuvni o'zgartiradi. Enter bosilganda xabarni haqiqatan yuborishni JavaScript qiladi. Yozuv va haqiqiy natija bir xil bo'lsin — "Yuborish" deb yozib, yangi qator ochish mehmonni chalg'itadi.

8. Hujumchi nigohi

«Bahor» saytida "Mehmonlar sharhi" bo'limi bor. Dasturchi sharh oynasini contenteditable="true" bilan yasadi. JavaScript blok ichidagi HTML'ni serverga yuboradi, server esa uni hamma mehmonlarga ko'rsatadi.

Hujumchi nima qiladi? U sharh o'rniga DevTools orqali blokka shunday HTML qo'yadi:

<!-- ❌ Hujumchi yuborgan "sharh" -->
<img src="x" onerror="alert('Sizning sessiyangiz menda!')">

Rasm yuklanmaydi (src="x" — mavjud emas), shuning uchun onerror dagi kod ishga tushadi. Sharhlar sahifasini ochgan har bir mehmonning brauzerida. Bu yerda faqat alert — lekin o'rnida mehmonning cookie lari va sessiyasini o'g'irlaydigan kod bo'lishi mumkin. Bu — Forma xavfsizligi darsida tanishgan XSS hujumi.

Qanday himoyalanamiz:

1. Oddiy matn kerak bo'lsa — oddiy matn oling. Sharh uchun textarea yoki contenteditable="plaintext-only". Bezak kerak emas — HTML ham kerak emas.
2. Server baribir tekshiradi. Hujumchi brauzerni chetlab o'tib, so'rovni curl bilan yuborishi mumkin. Shuning uchun server kelgan matnni sahifaga chiqarishda < ni < ga aylantiradi (Maxsus belgilar).
3. Bezakli matn kerak bo'lsa (maqola muharriri kabi) — maxsus "tozalovchi" kutubxona ruxsat etilgan teglardan boshqasini o'chiradi. Buni XSS va DOM xavfsizligi darsida ko'ramiz.

<!-- ✅ Sharh — oddiy matn sifatida -->
<label for="sharh">Sharhingiz</label>
<textarea id="sharh" name="sharh" maxlength="500"></textarea>

9. Ko'p uchraydigan xatolar

9.1 Musbat tabindex

Lighthouse (sahifa sifatini tekshiradigan vosita, Audit darsida ko'ramiz) buni alohida xato sifatida ko'rsatadi:

Some elements have a [tabindex] value greater than 0

Tarjimasi: "Ba'zi elementlarda tabindex qiymati 0 dan katta." Tuzatish: musbat qiymatlarni olib tashlang va elementlarni kodda kerakli tartibda joylashtiring.

9.2 div + tabindex="0" = soxta tugma

Fokus bor, lekin Enter ishlamaydi va ekran o'quvchi "tugma" demaydi. Tuzatish: button.

9.3 tabindex="-1" bilan "o'chirdim" deb o'ylash

Tugma Tab da chiqmaydi, lekin sichqoncha bilan bosiladi va ekran o'quvchi uni topadi. Tuzatish: o'chirish uchun — disabled yoki inert.

9.4 Ikkita autofocus

Validator xatosi yuqorida. Brauzer baribir faqat birinchisini ishlatadi. Tuzatish: bittasini qoldiring — yoki umuman olib tashlang.

9.5 contenteditable ni forma maydoni deb o'ylash

Yozilgan matn serverga ketmaydi va sahifa yangilansa yo'qoladi. Tuzatish: oddiy maydonlar uchun input va textarea.

10. Mashqlar

1-mashq (oson): Kim fokus oladi?

Qaysi elementlarga Tab bilan yetib bo'ladi?

1. <p>Ochiqmiz</p>
2. <a href="menyu.html">Menyu</a>
3. <a>Menyu</a>
4. <button disabled>Yuborish</button>
5. <div tabindex="0">Narxlar</div>
6. <h2 tabindex="-1">Xatolar</h2>
7. <p contenteditable>Eslatma</p>

2-mashq (o'rta): Tartibni tuzating

Bu formada Tab qanday tartibda yuradi? Keyin musbat tabindex siz, to'g'ri tartibda qayta yozing.

<!-- ❌ -->
<form action="https://example.com/bron" method="post">
  <label for="sana">Sana</label>
  <input type="date" id="sana" name="sana" tabindex="3">
  <label for="ism">Ism</label>
  <input type="text" id="ism" name="ism" tabindex="1">
  <label for="tel">Telefon</label>
  <input type="tel" id="tel" name="tel" tabindex="2">
  <button type="submit">Band qilish</button>
</form>

<form action="https://example.com/bron" method="post">
  <label for="ism">Ism</label>
  <input type="text" id="ism" name="ism">
  <label for="tel">Telefon</label>
  <input type="tel" id="tel" name="tel">
  <label for="sana">Sana</label>
  <input type="date" id="sana" name="sana">
  <button type="submit">Band qilish</button>
</form>

3-mashq (qiyin): Oshpaz taxtasi

oshpaz.html ichki sahifasini yasang:

• To'liq HTML skelet, h1 — "Oshpaz taxtasi".
• Bugungi eslatma — contenteditable="true" blok, ichida ikki paragraf. Ikkinchisi — "Yozgan: bosh oshpaz" — tahrirlanmaydigan qism.
• "Mehmonlarga e'lon" — alohida blok: faqat oddiy matn qabul qiladi, imlo tekshiruvi o'chirilgan.
• Keng jadval (3 ta taom, 3 ta ustun) — klaviatura bilan aylantirish uchun fokuslanadigan o'ramda.
• Oxirida bitta gap bilan yozing: nega bu sahifada yozilgan eslatma ertasi kuni yo'qoladi?

W3C validatori (validator.w3.org/nu) bilan tekshiring.

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Oshpaz taxtasi — Choyxona «Bahor»</title>
  </head>
  <body>
    <main>
      <h1>Oshpaz taxtasi</h1>
      <div class="eslatma" contenteditable="true">
        <p>Bugun norin tayyorlanadi.</p>
        <p contenteditable="false">Yozgan: bosh oshpaz</p>
      </div>
      <h2>Mehmonlarga e'lon</h2>
      <div class="elon" contenteditable="plaintext-only"
           spellcheck="false">
        Juma kuni choyxona 12:00 dan ochiladi.
      </div>
      <div class="jadval-oynasi" tabindex="0">
        <table>
          <caption>Bugungi reja</caption>
          <tbody>
            <tr><th>Taom</th><th>Porsiya</th><th>Tayyor</th></tr>
            <tr><td>Osh</td><td>80</td><td>12:00</td></tr>
            <tr><td>Norin</td><td>40</td><td>13:00</td></tr>
            <tr><td>Lag'mon</td><td>50</td><td>12:30</td></tr>
          </tbody>
        </table>
      </div>
      <p>Eslatma saqlanmaydi: sahifa yangilansa yo'qoladi.</p>
    </main>
  </body>
</html>

11. Real ishda

• Matn muharrirlari. Google Docs, Notion, Telegram Web'dagi xabar oynasi — hammasi contenteditable ustiga qurilgan. Real loyihalarda uni to'g'ridan-to'g'ri emas, tayyor muharrir kutubxonalari orqali ishlatishadi (kursda keyinroq tilga olamiz, hozir bilish shart emas).
• Accessibility auditi. Lighthouse va boshqa vositalar musbat tabindex ni topadi. Katta kompaniyalarda bunday kod code review'dan o'tmaydi.
• Fokusni boshqarish — frontend'ning jiddiy ko'nikmasi. Dialog ochilganda, sahifa almashganda, xato chiqqanda fokus qayerga tushishi — tabindex="-1" va JavaScript bilan hal qilinadi. Buni Klaviatura va fokus boshqaruvi darsida davom ettiramiz.
• Intervyuda so'raladi: "tabindex="0" va "-1" farqi nima?", "Nega musbat tabindex yomon?", "div ni tugma qilsa bo'ladimi?".

Xulosa

• Fokus — klaviatura bosishlarini qabul qilayotgan yagona element; tartib — kod tartibi.
• tabindex="0" — tartibga qo'shadi, "-1" — chiqaradi (JavaScript va bosish baribir fokus beradi), musbat qiymat — ishlatilmaydi.
• tabindex="-1" — o'chirgich emas; bo'limni o'chirish uchun inert, maydon uchun disabled.
• autofocus — global, sahifada (va har dialogda) bittadan; xavfli amalda "xavfsiz" tugmaga.
• accesskey — to'qnashuvlar va har xil birikmalar sabab ommaviy saytlarda ishlatilmaydi.
• contenteditable saqlamaydi va yuborilmaydi; begona matn uchun plaintext-only, server esa baribir ekranlaydi.

Keyingi dars: head anatomiyasi va viewport — sahifaning ko'rinmas qismi: head ichida nima, qaysi tartibda turadi va viewport qatori telefonda nima qiladi.

Manbalar

• MDN: "tabindex", "autofocus", "accesskey", "contenteditable", "enterkeyhint", "spellcheck" — developer.mozilla.org
• WHATWG HTML: "Focus", "The accesskey attribute", "Editing" — html.spec.whatwg.org
• web.dev: "Using tabindex" — web.dev
• Chrome Lighthouse: "No element has a [tabindex] value greater than 0" — developer.chrome.com