Giriş mərkəzini yoxlamaq üçün jQuery istifadə edin

Yaratdığım saytın ilk səhifəsində, bir neçə <div> CSS-i istifadə edin :hover siçan üzərində olduqda bir sərhəd əlavə etmək üçün :hover pseudo-class :hover . <div> biri olan jQuery istifadə edərək, bir <form> malikdirsə, onun girişinin mərkəzə düşdüyü bir sərhədi saxlayacaqdır. Bu, böyük bir işdir, istisna olmaqla, IE6 dəstək vermir :hover <a> s. Beləliklə, bu brauzer üçün CSS-i simulyasiya etmək üçün jQuery istifadə edirik :hover $(#element).hover() metodundan istifadə edərək :hover . Yalnız problem indi jQuery giriş mərkəzində olduqda, focus() formasını və hover() funksiyasını işlədir, sonra istifadəçi siçanı irəli və irəlilədikdə, sərhəd buraxır.

Bu davranışı dayandırmaq üçün bir növ şərti istifadə edə biləcəyimizi düşündüm. Misal üçün, siçanı yoxlasaq, girişlərdən hər hansı birinin diqqət mərkəzində olsaydıq, sərhədə keçməyimizi dayandıra bilərik. AFAIK, heç bir şey yoxdur :focus jQuery-də :focus seçici, buna görə də bunu necə edəcəyimi bilmirəm. Hər hansı bir fikir?

467
09 июня '09 в 0:21 2009-06-09 00:21 bloudermilk 09 İyun 09 'da 0:21' da təyin olundu. 2009-06-09 00:21
@ 15 cavab

jQuery 1.6 +

jQuery əlavə etdi :focus seçicisi, buna görə artıq əlavə etmək lazım deyil. Yalnız $("..").is(":focus")

jQuery 1.5 və aşağıda

Düzenleme: Değiştiğimiz zaman, Ben'nun bu mənanın yeni bir fokusunu odak noktada test etmenin ən yaxşı üsullarını tapırıq:

 jQuery.expr[':'].focus = function( elem ) { return elem === document.activeElement  ( elem.type || elem.href ); }; 

Mathias Bynens'dan sitat:

Bədən kimi saxta pozitivləri süzgəc üçün bir testin (elem.type || elem.href) əlavə (elem.type || elem.href) . Beləliklə, forma nəzarətləri və hiperlinklər istisna olmaqla, bütün elementləri süzgəc etdirməliyik.

Yeni bir selektor təyin edirsiniz. Plugins / Authoring- ə baxın. Sonra edə bilərsiniz:

 if ($("...").is(":focus")) { ... } 

və ya

 $("input:focus").doStuff(); 

Hər hansı bir jQuery

Yalnız hansı elementin diqqət mərkəzində olduğunu öyrənmək istəyirsinizsə, istifadə edə bilərsiniz

 $(document.activeElement) 

Sürüminizin 1.6 və ya daha aşağı olacağına əmin deyilsinizsə, əlavə edə bilərsiniz :focus əgər :focus seçicisi itkindirsə:

 (function ( $ ) { var filters = $.expr[":"]; if ( !filters.focus ) { filters.focus = function( elem ) { return elem === document.activeElement  ( elem.type || elem.href ); }; } })( jQuery ); 
808
21 апр. cavab gnarf 21 apr tərəfindən verilir . 2010-04-21 19:04 '10 at 19:04 2010-04-21 19:04

CSS

 .focus { border-color:red; } 
border=0

Jquery

  $(document).ready(function() { $('input').blur(function() { $('input').removeClass("focus"); }) .focus(function() { $(this).addClass("focus") }); }); 
43
09 июня '09 в 0:41 2009-06-09 00:41 Cavab Daniel Moura 09 iyun '09 'da 0:41' da verilmişdir 2009-06-09 00:41

Hal-hazırda qəbul ediləndən daha etibarlı cavab:

 jQuery.expr[':'].focus = function(elem) { return elem === document.activeElement  (elem.type || elem.href); }; 

body kimi saxta pozitivləri süzgəc üçün test (elem.type || elem.href) əlavə edildi. Beləliklə, forma nəzarətləri və hiperlinklər istisna olmaqla, bütün elementləri süzgəc etdirməliyik.

( bu mənada alınan Ben Alman .)

18
22 марта '11 в 15:58 2011-03-22 15:58 22 Mart 2011-ci il tarixdə Mathias Bynens- ə cavab verib 2011-03-22 15:58

Aprel 2015-də yeniləndi

Bu bir müddətdir bir sual var və bəzi yeni müqavilələr oyuna gəldiyinə görə mən hiss etdim ki,

Bunun əvəzinə .on metodu artıq tətbiq edilmişdir.

Onların sənədləri necə işlədiyini izah etməkdə çox faydalıdır;

.On () metodu, hadisə işleyicilerini jQuery obyektində hazırda seçilmiş elementlər dəstinə verir. JQuery 1.7-də başlayaraq, .on () metodu, hadisə işleyicilerini əlavə etmək üçün lazım olan bütün funksiyaları təmin edir. Daha yaşlı hadisə metodlarından jQuery-ə keçməyə kömək etmək üçün, baxın. Bind (),. Delegate () və .live ().

Belə ki, giriş mərkəzli bir hadisə hədəfləmək üçün onu bir skriptdə istifadə edə bilərsiniz. Kimi bir şey:

 $('input').on("focus", function(){ //do some stuff }); 

Bu olduqca etibarlı və hətta TAB düyməsini istifadə etməyə imkan verir.

9
07 апр. cavab jbutler483 07 apr verilir . 2015-04-07 18:27 '15 'də saat 18:27' da

Mən sizə lazım olan şeyə tam əmin deyiləm, amma bu, giriş elementlərinin (və ya bir div?) Vəziyyətini qənaət etməklə əldə edilə bilər.

 $('div').each(function(){ var childInputHasFocus = false; $(this).hover(function(){ if (childInputHasFocus) { // do something } else { } }, function() { if (childInputHasFocus) { // do something } else { } }); $('input', this) .focus(function(){ childInputHasFocus = true; }) .blur(function(){ childInputHasFocus = false; }); }); 
2
09 июня '09 в 0:37 2009-06-09 00:37 Cavab Ceyms 09 iyun 09: 09-da 0:37 2009-06-09 00:37 tarixində verilir

Bunu simüle etmək üçün mouseOver və mouseOut istifadə etməyi düşündünüz. Həmçinin mouseEnter və mouseLeave-ə baxın

1
09 июня '09 в 0:29 2009-06-09 00:29 Cavab mkoryak tərəfindən 09 iyun 09:29 da 0:29 2009-06-09 00:29

Bir maddənin vəziyyətini göstərmək üçün dərslərdən istifadə etmək üçün alternativ daxili məlumat mağaza funksiyasıdır .

PS: data() funksiyasından istifadə etmək istədiyiniz məntiqi dəyərləri və istədiyiniz hər şeyi saxlaya bilərsiniz. Bunlar yalnız strings deyil :)

 $("...").mouseover(function () { // store state on element }).mouseout(function () { // remove stored state on element }); 

Və sonra yalnız elementlərin vəziyyətinə giriş məsələsi.

1
09 июня '09 в 14:30 2009-06-09 14:30 Cavab roosteronacid tərəfindən 09 iyun 09:30 saat 14:30 'da verilir. 2009-06-09 14:30

Kimsə xahiş edirsə, indi diqqətini çəkmək üçün daha yaxşı bir yoldur, $(foo).focus(...)

http://api.jquery.com/focus/

0
30 окт. Cavab 30 oktyabrda CrackSmoker9000 tərəfindən verilir 2014-10-30 06:51 '14 da 6:51 2014-10-30 06:51

Yeni bir dəyər daxil etməzdən əvvəl istifadəçinin seçməməsi üçün mətn daxilindəki məzmunu () (seç) seçmək üçün ("diqqət") bir hadisə var idi.

$ (formObj) .selekt ();

Müxtəlif brauzerlər arasındakı qəribəliklərdən ötəri seçmə bəzən ona səbəb olan bir kliklə əvəzlənir və imleci mətn sahəsinə yerləşdirdikdən sonra dərhal tərk etdi (FF-də işlədib, lakin IE uğursuz oldu)

Mən bunu həll edə biləcəyini düşündüm, seçimi təxirə saldı ...

SetTimeout (funksiya () {$ (formObj) .select ();}, 200);

Böyük iş gördü və seçki qaldı, amma gülünc bir problem ortaya çıxdı. Bir sahədən başqa bir sahəyə qoyursanız, seçmə seçilmədən əvvəl diqqət növbəti sahəyə keçər. Fokus mərkəzini seçdikdən sonra, diqqət geri dönəcək və yeni bir fokus tədbirini tetikler. Bu, ekranda rəqsləri seçən bir giriş kaskadında olduğu ortaya çıxdı.

İşlənən bir həll sahəsi seçmədən əvvəl hələ də diqqət mərkəzində olub olmadığını yoxlamaq, lakin artıq qeyd etdiyimiz kimi, yoxlamaq üçün asan bir yol yoxdur ... Mən bütün avtomatik seçimi tərk edərək sona çatdım və bu yalnız jQuery olmadı subroutines ilə yüklənmiş böyük funksiyanı seçin ...

0
08 сент. Cavab Brian 08 sep verilir . 2011-09-08 22:56 '11 at 10:56 pm 2011-09-08 22:56

Elementin mərkəzini yoxlamaq üçün bir plugin var: http://plugins.jquery.com/project/focused

 $('input').each(function(){ if ($(this) == $.focused()) { $(this).addClass('focused'); } }) 
0
12 нояб. Cavab 12 noyabrda Murat Çorlu tərəfindən verildi. 2009-11-12 12:05 '09 da 12:05 'da 2009-11-12 12:05

Nə etdiyimi adlandırdığım bir təsadüfi sinif yaratdıq .JQuery focus () funksiyasına əlavə edilən və silinən element. Hover () funksiyası siçan işlədildikdə onu yoxlayır .elementhasfocus:

 if(!$("#quotebox").is(".boxhasfocus")) $(this).removeClass("box_border"); 

Beləliklə, əgər bu sinfi yoxsa (oxuyun: divdəki element heç bir fokusa malik deyildirsə), sərhəd çıxarılacaq. Əks halda, heç bir şey olmaz.

0
09 июня '09 в 0:41 2009-06-09 00:41 Cavab 09 iyun 2009- cu il saat 09 : 00 -da 09 : 00 -da açıqlanacaq

Xeyr: Focus, lakin var: seçilmiş http://docs.jquery.com/Selectors/selected

ancaq seçdiyiniz hər şeyə görə hər şeyin necə göründüyünü dəyişdirmək istəyirsinizsə, ehtimal ki, bulanık hadisələrlə işləməlisiniz.

http://docs.jquery.com/Events/blur

0
09 июня '09 в 0:38 2009-06-09 00:38 Cavab Chris Brandsma tərəfindən 09 İyun 09 'da 0:38 2009-06-09 00:38' də verilir

Bildiyimiz kimi, ekranda hər hansı bir giriş odaklanmışsa, brauzerdən soruşa bilməyəcəksiniz, bir növ diqqət izləmə qurmaq lazımdır.

Mən adətən "noFocus" adlı bir dəyişənə malikəm və onu doğru hesab etdim. Sonra heç bir Focus yalan edən bütün girişlərə mərkəzləşdirilmiş hadisə əlavə edirəm. Sonra noFocus-ı gerçəkliyə döndərən bütün girişlərə bir bulanma hadisəsi əlavə edirəm.

MooTools sinifində bu qədər asanlıqla işləyən bir mənim var, əminəm ki, eyni şeyi etmək üçün bir jquery plugin yarada bilərsiniz.

Bu yaradıldıqdan sonra, sərhədləri əvəz etmədən əvvəl heç bir faktı yoxlaya bilərsiniz.

0
09 июня '09 в 0:36 2009-06-09 00:36 Cavab Ryan Floransa tərəfindən 09 iyun 09: 09-da 0:36 2009-06-09 00:36

Hər iki dövlətin (asılı, odaklanmış) doğru / yanlış bayraqları olduğundan əmin olun və dəyişdikdə hər ikisi yanlış olduqda sərhədi aradan qaldıran bir funksiyanı yerinə yetirsinlər, əks halda sərhəd göstərilir.

Beləliklə: onfocus focus = true, onblur focus = false ayarlar. onmouseover dəstləri hovered = true, onmouseout dəstləri hovered = false. Bu hadisələrin hər birindən sonra sərhədi əlavə edən / sildən bir funksiya başlanır.

0
09 июня '09 в 0:35 2009-06-09 00:35 Cavab Blixt 09 iyun 09: 09-da verilir. 2009-06-09 00:35

Sadə

  <input type="text" /> <script> $("input").focusin(function() { alert("I am in Focus"); }); </script> 
-1
16 марта '12 в 10:28 2012-03-16 10:28 Cavab jolly.exe verilib 16 mart '12 saat 10:28 'da 2012-03-16 10:28

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