Foydalanuvchi uning ichidagi matn maydonini tanlaganida tr elementining rangini o'zgartirmoqchiman. Fokus pseudo-klassi u bilan ishlamayapti. Buni JavaScriptsiz amalga oshirish mumkinmi?
html:
<table>
<tr>
<td>Name</td><td><input type="text" name="name"></td>
</tr>
</table>
CSS:
tr:focus
{
background:yellow;
}
1-yangilash:
Faqat CSS usuli mavjud emas. JavaScript yordamida buni amalga oshirishning eng oson yo'li qanday?
Yo'q. CSS3 da mavzu selektori yo'q, lekin CSS4 da bitta bo'ladi.
tahrirlash:
Sof JavaScript yechimi bo'lishi mumkin
var i;
var inputs = document.querySelectorAll("tr > td > input");
for(i = 0; i < inputs.length; ++i){
inputs[i].addEventListener('focus',function(e){
this.parentNode.parentNode.className += ' highlight';
});
inputs[i].addEventListener('blur',function(e){
this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(/\s*highlight\s*/ig,' ');
});
}
Biroq, bu IE7 da ishlamaydi, chunki 8-dan oldingi versiyalar document.querySelectorAllni bilishmaydi. a> (namoyish). Brauzerlar o‘rtasida muammosiz yechim topmoqchi bo‘lsangiz, jQuery va quyidagi koddan (namoyish):
$("tr > td > input").focus(function(e){
$(this).parent().parent().addClass('highlight');
}).blur(function(e){
$(this).parent().parent().removeClass('highlight');
});
CSS-ga tr.highlight sinfini qo'shishni unutmang. Shuni yodda tutingki, jQuery keyingi versiyalarida eski brauzerlarni qo‘llab-quvvatlashni to‘xtatadi (qarang: Brauzerni qo‘llab-quvvatlash), shuning uchun siz IE 8 uchun jQuery 1.x dan foydalanish kerak bo'ladi.
Foydalanish haqida nima deyish mumkin: fokus-ichida...
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
</table>
CSS:
tr:focus-within {
background:yellow;
}
Menga nima yordam berdi. Tanlangan javob ish bermadi. Men uchun.
tabindex atributidan foydalanib, tr elementni yetarlicha yangi brauzerlarda fokuslanadigan qilish texnik jihatdan mumkin, masalan. <tr tabindex="1">.
Biroq, fokuslash usuli brauzerga bog'liq va diqqatni jamlash mumkin bo'lgan jadval qatorlari foydalanish uchun dahshatli tush bo'lishi mumkin. Masalan, IEda ham, Firefox-da ham qator TAB tugmasi to'g'ri ishlatilganda diqqat markazida bo'ladi, lekin yo'naltirilgan qator kiritishni olmaydi. Kirish maydoniga kirish uchun foydalanish uchun yana TAB tugmasini bosish kerak bo'ladi. Firefox-da, lekin IE-da emas, qatorni bosish orqali ham yo'naltirish mumkin, lekin kiritish maydonini bosish orqali emas (chunki bu maydonga e'tibor qaratiladi). Agar siz label belgilashdan foydalansangiz, foydalanish qulayligi va qulayligi uchun tavsiya etiladi, masalan.
<table>
<tr tabindex="1">
<td><label for="name">Name</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
</table>
… keyin yorliqni bosish satr elementiga emas, kiritish maydoniga (label belgilashdan foydalanish sabablaridan biri!) qaratilgan.
Yo'q, siz JavaScriptsiz qila olmaysiz.
Men shuni aytmoqchi edim: http://jsfiddle.net/qHmGe/
