JavaScript focus () işlevini kullanarak bir <div> öğesine odaklanmak mümkün müdür?

227

<div>JavaScript focus()işlevini kullanmaya odaklanmak mümkün mü ?

Bir <div>etiketim var

<div id="tries">You have 3 tries left</div>

Yukarıdaki <div>kullanarak odaklanmak çalışıyorum :

document.getElementById('tries').focus();

Ama işe yaramıyor. Birisi bir şey önerebilir mi ....?

javascript focus

— OM Sonsuzluk
kaynak

3

'Odaklandığınızda' ne olmak istersiniz? Div'ler girişi kabul etmez, bu yüzden kenarlığı veya arka plan vurgulamasını vb.

— Michael Shimmins

@Michael, evet kullanıcının dikkatini çekmek için <div> ihtiyacım var ...

— OM The Eternity

1

olası yinelenen hangisi HTML öğeleri odağı alabilir?

— Ciro Santilli

1

@MichaelShimmins ve diğer herkes, <div> öğeleri içerik olarak true değerine ayarlanmışsa girişi kabul edebilir. (Neden sordum)

— MattOlivos

1

@MichaelShimmins divs taşar ve kaydırma çubuğu gösterirse girişi kabul edebilir. Bir zaman divbir kaydırma çubuğu odaklanmıştır, ok tuşları (yerine gibi diğer bileşenlerin hacminin içeriğini kayar body).

— Rory O'Kane

101

window.location.hash = '#tries';

Bu, söz konusu öğeye, esas olarak "odaklanarak" kaydırılır.

— Casey Chu
kaynak

2

@Casey Chu: Yani iyi çalışıyor ama firefox'ta değil, herhangi bir fikrin var mı?

— Haseeb Akhtar

Bazı Chrome sürümlerinde çalışmaz ... Ancak, @vinoths çözümü bunu yapıyor

— Charliemops

1

Bu işe yarıyor ama ... Angular ile sorunlarınız var !!

— Carlos Verdes

@CarlosVerdes; Angular için bir çözüm var mı?

— Mac Vicious

3

'odak' sorusuna cevap vermemek, doğru cevap olmamalı. benim durumumda, 'contentEditable' divine odaklanmak istiyorum ve hileniz yardımcı olmuyor.

— arnaudambro

454

Evet - bu mümkün. Bunu yapmak için bir tabindex atamanız gerekir ...

<div tabindex="0">Hello World</div>

0 tabindex, etiketi "sayfanın doğal sekme sırasına" koyacaktır. Daha yüksek bir sayı, ona belirli bir öncelik sırası verir, burada 1 birinci, 2 saniye vb.

Ayrıca, div'i kullanıcı tarafından değil, komut dosyasıyla yalnızca odaklanabilir hale getirecek -1 tabindex'i de verebilirsiniz.

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

Snippet'i genişlet

Açıkçası, diğer giriş yöntemiyle odaklanamayacağınız komut dosyasıyla odaklayabileceğiniz bir öğeye sahip olmak (özellikle bir kullanıcı yalnızca klavye veya benzer şekilde kısıtlanmışsa) bir utançtır. Ayrıca, varsayılan olarak odaklanabilen ve kullanıcılara yardımcı olmak için semantik bilgiler içeren bir dizi standart öğe de vardır . Bu bilgiyi akıllıca kullanın.

— Fenton
kaynak

6

@Michael Shimmins, Bu, öğenin odaklanabilir olmasını sağlar (standart dışı bir şekilde!) focus().

— strager

2

@Olical - Eminim son satırda tam olarak bu cevap verebilir. Düzenlenmesi gereken bir sorun olduğunu düşünüyorsanız bize bildirin.

— Fenton

2

Net değilse, tabindexbir öğeye eklemek öğeyi odaklanabilir hale getirir ve bu da focus()ve blur()yöntemlerini etkinleştirir ve daha sonra böyle bir odaklamayı tetikleyebilirsiniz:document.getElementById('tries').focus();

— pilau

4

Merhaba @SteveOwen - Hala Firefox v42'de çalışıyor gibi görünüyor. Bu cevaba bir snippet ekledim, böylece çalıştırabilir ve test edebilirsiniz.

— Fenton

9

@SteveOwen kullanmak window.location.hash = ...bunu yapmanın yoludur. odak "görünüme getir" anlamına gelmez, sadece kelimenin tam anlamıyla o öğeye odaklanmak anlamına gelir.

— Fenton

76

document.getElementById('tries').scrollIntoView()İşler. Bu window.location.hash , sabit konumlandırmaya sahip olduğunuzdan daha iyi çalışır .

— vinoths
kaynak

2

Bu çözümün IE, Opera veya Safari'de çalışmadığını unutmayın.

— AlecRust

1

Bunu Chrome 65'te denedim ve işe yaramıyor. Yer paylaşımlı div görünüme kaydırılır, ancak odak hala arka plan divındadır. Tek kesin ateş yolu tabindexbindirme div (sekme kullanarak ) sekmeli bir öğeye sahip olmak ve focus()bunun yerine bu öğeyi kullanmaktır.

— thdoan

@ om-the-eternity, div'in kullanıcının dikkatini çekmesini istediğini zaten belirtti, bu yüzden ihtiyacı olan şey aslında odaklanmak değil (çalışırken bile doğru değil) div'e getirmek, ancak ekrana getirmek , bu çözer

— Omar Vazquez

Bunu Chrome'da yaparsam, hala odaklanmış giriş alanına geri kaydırmaya devam eder. Özellikle sayfa henüz yüklenmediğinde.

— Roger Krueger

37

Tabindex kullanabilirsiniz

<div tabindex="-1"  id="tries"></div>

Tabindex değeri bazı ilginç davranışlara izin verebilir.

"-1" değeri verilirse, öğe sekmeye sekilemez, ancak öğeye programlı olarak odak verilebilir (element.focus () kullanılarak).
0 değeri verilirse, öğe klavyeden odaklanabilir ve belgenin sekme akışına düşer. 0'dan büyük değerler bir öncelik seviyesi oluşturur ve 1 en önemlisidir.

— Sarath Ak
kaynak

1

Vay canına, teşekkürler iyi numara. Teşekkür ederim! Bunu aksini anlamazdım.

— AVProgrammer

Hayat kurtarıcı, teşekkürler. Edge'de bir div odaklanabilir ancak bu numara olmadan Chrome'da odaklanamaz. Kabul edilen cevap harika ama url'de ek bölüm istemiyorum.

— Cal

Krom ve firefox ile iyi çalışır

— Susampath

14

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

— Azad
kaynak

Bu benim için sadece Chromium / Chrome 46'da çalışır$('#inner').focus();

— TNT

2

Michael Shimmin'inki gibi bir şey önermek istedim, ancak element ya da ona uygulanan CSS gibi sabit kodlama olmadan.

Ben sadece jQuery sınıf eklemek / kaldırmak için kullanıyorum, jquery kullanmak istemiyorsanız, sadece add / removeClass için bir yedek gerekir

--Javascript

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

highlight(document.getElementById('tries'));

--CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

— Juan Mendes
kaynak

1

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

Snippet'i genişlet

— san jing
kaynak

0

Kenarlığı flaş yapmak için şunları yapabilirsiniz:

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

Bu kenarlığı 1 saniye boyunca sabit kırmızı hale getirecek ve tekrar kaldıracaktır.

— Michael Shimmins
kaynak