$ .focus () çalışmıyor

JQuery'nin son örneği focus()belgeleri devletler

$('#id').focus()

girdiyi odaklanmış (etkin) yapmalıdır. Bu çalışmayı başaramıyorum.

Bu sitedeki konsolda bile, arama kutusu için deniyorum

$('input[name="q"]').focus()

ve hiçbir şey almıyorum. Herhangi bir fikir?

Aslında, bu siteye odaklanmak için verdiğiniz örnek, konsolda odaklanmadığınız sürece gayet iyi çalışıyor. Çalışmamasının nedeni, dev konsolundan odak çalmamasıdır. Konsolunuzda aşağıdaki kodu çalıştırır ve ardından tarayıcı pencerenizi hızlıca tıklarsanız, arama kutusuna odaklandığını görürsünüz:

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

Diğerine gelince, geçmişte bana sorun çıkaran tek şey olayların sırası. DOM'ya bağlı olmayan bir öğeye odak () yöntemini çağıramazsınız. Odaklamaya çalıştığınız öğe zaten DOM'a eklenmiş mi?

Net başka bir yerde bir çözüm bulundu ...

$('#id').focus();

işe yaramadı.

$('#id').get(0).focus();

Iş yaptı.

Buradaki bazı cevaplar setTimeout, hedef öğeye odaklanma sürecini geciktirmek için kullanılmasını önermektedir . Bunlardan biri hedefin kalıcı bir diyalog içinde olduğunu belirtiyor. setTimeoutNerede kullanıldığına dair spesifik ayrıntıları bilmeden çözümün doğruluğu hakkında daha fazla yorum yapamam . Ancak, burada olduğu gibi bu konuya giren insanlara yardım etmek için burada bir cevap vermeliyim diye düşündüm

Meselenin basit gerçeği, henüz görünür olmayan bir öğeye odaklanamamanızdır . Bu sorunla karşılaşırsanız, odaklanma denemesi yapıldığında hedefin gerçekten görünür olduğundan emin olun . Kendi durumumda bu çizgiler boyunca bir şeyler yapıyordum

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

Bu işe yaramadı. Ben sadece $ çalıştırıldığında neler olduğunu fark ( '# elementID'). Focus () `konsolundan yaptığımız işi. Fark - hedefin üzerindeki kodumda, animasyonun tamamlanamayacağı için hedefin etkileneceğinin kesinliği yoktur . Ve ipucu yatıyor

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

beklendiği gibi çalışır. Ben de başlangıçta bir setTimeoutçözüm buldum ve o da işe yaradı. Bununla birlikte, keyfi olarak seçilen bir zaman aşımı, ana cihazın hedef öğenin görünür olmasını sağlama sürecine ne kadar yavaş gittiğine bağlı olarak çözümü er ya da geç kırmak zorundadır.

bootstrap + modal kullanıyorsanız, bu benim için çalıştı:

  $(myModal).modal('toggle');
  $(myModal).on('shown.bs.modal', function() {
    $('#modalSearchBox').focus()
  });

Başka birinin bu soruya rastlaması ve sahip olduğum durumun aynısı olması durumunda - başka bir öğeye tıkladıktan sonra odağı ayarlamaya çalışıyordum, ancak odak işe yaramadı. Sadece ihtiyacım olduğu ortaya çıktı e.preventDefault();- işte bir örnek:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

Bu yardımcı oldu:

Fareyle kaplanmış bir olay işleyicisinden HTMLElement.focus () öğesini çağırırsanız, odağın HTMLElement öğesinden ayrılmasını önlemek için event.preventDefault () öğesini çağırmanız gerekir. Kaynak: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

Bunun eski olduğunu anlıyorum, ama bugün rastladım. Cevapların hiçbiri benim için işe yaramadı, işe yaradığını bulduğum şey setTimeout oldu. Ben setTimeout çalıştı kullanarak, bir kipte dosyalanmış girdi üzerine odaklanmak istedim. Bu yardımcı olur umarım!

Ben de bu sorunu yaşadım. Benim durumumda çalışan çözüm, HTML öğesinde tabindex özelliğini kullanmaktı.

Ben kullanıyordum ng-repeatbir liste içindeki bazı li elemanları ve ben sadece döngü sırasında her li için tabindex niteliğini eklendi, böylece ilk li kullanılarak .focus () odak getirmek mümkün değildi.

Peki şimdi <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

Bu +1, dizin 0'dan başlar. Ayrıca .focus () işlevini çağırmadan önce öğenin DOM'da bulunduğundan emin olun

Umarım bu yardımcı olur.

"$ (Element) .show ()" kullandığınız için çalışmama sorunu olanlar için. Bir sonraki yolu çözdüm:

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

Böylece bir zamanlayıcıya ihtiyacınız yoktur, show yöntemi tamamlandıktan sonra yürütülür.

Odaklanmadan önce bir gecikme ekleyin (). 200 ms yeterlidir

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

Şimdi bu sorunu tekrar ettim ve inanın ya da inanmayın, tek yapmam gereken geliştirici araçlarını kapatmaktı. Görünüşe göre Konsol sekmesi, sayfa içeriğine göre odak önceliğine sahiptir.

Öğenin ve ebeveynlerinin görünür olduğundan emin olun. Gizli öğelere odaklanamazsınız

İLAVE ÇÖZÜM Odak () 'ın işe yaramadığı aynı sorun vardı, ancak sonunda gereken şeyin doğru konuma kaydırıldığı ortaya çıktı:

• https://stackoverflow.com/a/43342974/1335717

Benim durumum için bir sekme dizini belirtmem gerekiyordu ( -1yalnızca komut dosyasıyla odaklanabilirse)

<div tabindex='-1'>
<!-- ... -->
</div>