Formalar va boshqaruv elementlari

Hodisalar: change, input, cut, copy, paste

Ma'lumot o'zgarishi va almashish buferi (clipboard) bilan bog'liq hodisalar formalar bilan ishlashda muhim o'rin tutadi. change va input qiymat o'zgarishini kuzatsa, cut/copy/paste nusxalash-joylashtirish amallarini boshqaradi. Ushbu darsda ularni chuqur ko'rib chiqamiz.

change hodisasi

change hodisasi element o'zgartirilib bo'lgach ishga tushadi. Matnli maydonlar uchun bu element fokusni yo'qotganda yuz beradi — ya'ni har bir belgi kiritilganda emas, balki foydalanuvchi kiritishni tugatib, boshqa joyga o'tganda:

<input type="text" onchange="alert(this.value)">
<input type="button" value="Tugma">

<!-- input'ga matn yozib, tugmaga bossangiz,
     alert kiritilgan qiymatni ko'rsatadi -->

select, input type=checkbox va input type=radio uchun esa change tanlov o'zgarishi bilan darhol ishga tushadi — fokus yo'qolishini kutmaydi:

<select onchange="alert(this.value)">
  <option value="">Tanlang</option>
  <option value="1">Bir</option>
  <option value="2">Ikki</option>
</select>

input hodisasi

input hodisasi qiymat har qanday yo'l bilan o'zgargan har safar ishga tushadi. changedan farqli, u foydalanuvchi klaviaturadan belgi kiritganda ham, sichqoncha bilan matn joylashtirganda ham, ovoz orqali kiritganda ham darhol yuz beradi:

<input type="text" id="input">
O'zgardi: <span id="result"></span>

<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>
Agar biz foydalanuvchi kiritayotgan matnni real vaqtda kuzatmoqchi bo'lsak, aynan input — eng to'g'ri tanlov. U foydalanuvchi kiritishni tugatishini kutmaydi.
input hodisasi ichida event.preventDefault() ishlamaydi — chunki hodisa qiymat allaqachon o'zgargandan keyin yuz beradi. Kiritishni oldindan to'sish uchun keydown yoki beforeinput kabi boshqa hodisalar kerak bo'ladi.

change va input: solishtirma

Ko'p hollarda tirik (real-time) reaksiya kerak bo'lsa — input, faqat foydalanuvchi kiritishni yakunlagach ish qilmoqchi bo'lsangiz (masalan, server so'rovi) — change yoki input + kechiktirish (debounce) ishlatiladi.

cut, copy, paste hodisalari

Bu hodisalar mos ravishda ma'lumotni kesish, nusxalash va joylashtirish (cut/copy/paste) amallarida yuz beradi. Ular ClipboardEvent sinfiga tegishli bo'lib, event.clipboardData xossasi orqali almashish buferi ma'lumotiga kirish imkonini beradi.

Ushbu amallarni event.preventDefault() bilan to'sib qo'yish ham mumkin. Masalan, matn nusxalash yoki joylashtirishni butunlay taqiqlaymiz:

<input type="text" id="input">

<script>
  input.onpaste = function(event) {
    alert('joylashtirilmoqda: ' + event.clipboardData.getData('text/plain'));
    event.preventDefault(); // joylashtirishni to'saylik
  };

  input.oncut = input.oncopy = function(event) {
    alert(event.type + ' - ' + document.getSelection());
    event.preventDefault(); // amalni to'saylik
  };
</script>

E'tibor bering: cut/copyda nusxalanayotgan matnni document.getSelection() orqali, pasteda esa joylashtirilayotgan matnni event.clipboardData.getData('text/plain') orqali olamiz.

ClipboardData: nafaqat matn

event.clipboardData orqali biz nafaqat matn, balki boshqa formatdagi ma'lumotlarni ham o'qish/yozishimiz mumkin. Almashish buferi bir vaqtning o'zida turli formatlarda ma'lumot saqlashi mumkin:

// matnni olish
let text = event.clipboardData.getData('text/plain');

// buferga yozish (masalan, copy hodisasida)
event.clipboardData.setData('text/plain', 'Maxsus matn');
event.preventDefault(); // brauzerning odatiy nusxalashini to'saylik
Xavfsizlik sabablari tufayli almashish buferiga kirish cheklangan. event.clipboardData faqat cut/copy/paste hodisalari ishlovchisi ichida ishlaydi. Bu hodisalardan tashqarida (masalan, oddiy setTimeout ichida) buferga to'g'ridan-to'g'ri kirib bo'lmaydi. Umumiy dasturiy buferga kirish uchun esa alohida navigator.clipboard API'si mavjud.
navigator.clipboard — buferga kirishning zamonaviy asinxron API'si (masalan, navigator.clipboard.writeText('matn')). Lekin u xavfsizlik cheklovlariga ega: HTTPS talab qiladi va ko'pincha foydalanuvchi ruxsatini so'raydi.

Xavfsizlik cheklovlari

Almashish buferi — tizim darajasidagi (system-wide) resurs. Foydalanuvchi bir ilovada nusxalab, boshqasida joylashtirishi mumkin. Shuning uchun brauzerlar unga kirishni jiddiy cheklaydi:

Xulosa