Czy można skupić się na <div> za pomocą funkcji JavaScript focus ()?

227

Czy można skupić się na funkcji <div>JavaScript focus()?

Mam <div>tag

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

Staram się skupić na powyższym, <div>używając:

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

Ale to nie działa. Czy ktoś może coś zasugerować ...?

javascript focus

— OM Wieczność
źródło

3

Co chcesz się wydarzyć, gdy go „skoncentrujesz”? Divs nie akceptują danych wejściowych, więc czy chcesz flashować ramkę, czy podświetlenie tła itp.?

— Michael Shimmins,

@Michael, tak, potrzebuję tego <div>, aby zwrócić uwagę użytkownika ...

— OM The Eternity

1

możliwy duplikat Które elementy HTML mogą być aktywowane?

— Ciro Santilli 郝海东冠状病六四事件法轮功法轮功

1

@MichaelShimmins i ktokolwiek inny, elementy <div> mogą zaakceptować dane wejściowe, jeśli w contented ustawiono wartość true. (Powód, dla którego zapytałem)

— MattOlivos,

1

@MichaelShimmins divs może zaakceptować dane wejściowe, jeśli zostaną przepełnione i wyświetli pasek przewijania. Po ustawieniu punktu divz paskiem przewijania klawisze strzałek będą przewijać jego zawartość (zamiast zawartości innych elementów, takich jak body).

— Rory O'Kane

101

window.location.hash = '#tries';

Spowoduje to przewinięcie do danego elementu, w zasadzie „skupienie” go.

— Casey Chu
źródło

2

@Casey Chu: Działa dobrze np. W Firefox, ale masz jakiś pomysł?

— Haseeb Akhtar

Nie działa w niektórych wersjach Chrome ... Jednak rozwiązanie @vinoths to robi

— Charliemops

1

To działa, ale ... z Angularem miałbyś problemy !!

— Carlos Verdes,

@CarlosVerdes; Czy istnieje rozwiązanie dla Angular?

— Mac Vicious

3

nie odpowiadając na pytanie „skoncentrowane”, nie powinna to być poprawna odpowiedź. w moim przypadku chcę skupić się na div „contentEditable”, a twoja sztuczka nie pomaga.

— arnaudambro

453

Tak - jest to możliwe. Aby to zrobić, musisz przypisać tabindex ...

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

Tabindex 0 spowoduje umieszczenie tagu „w naturalnej kolejności tabulatorów strony”. Wyższa liczba da mu określoną kolejność pierwszeństwa, gdzie 1 będzie pierwszą, 2 sekundą i tak dalej.

Możesz także podać tabindex -1, co sprawi, że div będzie w stanie się skupić tylko przez skrypt, a nie użytkownika.

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>

Rozwiń fragment kodu

Oczywiście wstydem jest mieć element, na którym można ustawić ostrość za pomocą skryptu, którego nie można ustawić za pomocą innej metody wprowadzania danych (szczególnie jeśli użytkownik jest ograniczony tylko przez klawiaturę). Istnieje również cała masa standardowych elementów, które domyślnie można ustawić i które zawierają informacje semantyczne, aby pomóc użytkownikom. Wykorzystaj tę wiedzę mądrze.

— Fenton
źródło

6

@Michael Shimmins, Pozwala to na ustawianie ostrości elementu (w niestandardowy sposób!) Za pomocą focus().

— strager

2

@Olical - Jestem prawie pewien, że to dokładnie to, co jest napisane w ostatnim wierszu może odpowiedzieć. Daj mi znać, jeśli uważasz, że istnieje problem, który wymaga edycji.

— Fenton,

2

Jeśli nie było jasne, dodając tabindexdo elementu pozwoli zmianę ostrości, który umożliwia focus()i blur()metod, a następnie można wywołać skupienie jak poniżej:document.getElementById('tries').focus();

— pilaw

4

Cześć @ SteveOwen - wydaje się, że nadal działa w przeglądarce Firefox v42. Do tej odpowiedzi dodałem fragment kodu, abyś mógł go uruchomić i przetestować.

— Fenton,

9

@SteveOwen using window.location.hash = ...jest na to sposobem. skupienie nie oznacza „pokazania”, ale oznacza dosłownie umieszczenie skupienia na tym elemencie.

— Fenton

76

document.getElementById('tries').scrollIntoView()Pracuje. Działa to lepiej niż w window.location.hash przypadku stałego pozycjonowania.

— vinoths
źródło

2

Pamiętaj, że to rozwiązanie nie będzie działać w IE, Operze ani Safari.

— AlecRust

1

Właśnie próbowałem tego w Chrome 65 i to nie działa. Nakładka div przewija się do widoku, ale fokus nadal znajduje się w div div. Jedynym pewnym sposobem, jaki znam, jest posiadanie elementu tabbable (przy użyciu tabindexatrybutu) w div div nakładki i użycie focus()tego elementu.

— thdoan

@ om-the-eternity już stwierdził, że chce, aby div zwrócił uwagę użytkownika, więc to, czego potrzebuje, to nie skupiać się (nawet podczas pracy, nie jest to poprawne) div, ale przenoszenie go na ekran rozwiązuje to

— Omar Vazquez,

Jeśli zrobię to w Chrome, przewinie się ono z powrotem do nadal skoncentrowanego pola wprowadzania. Zwłaszcza jeśli strona jeszcze się nie załadowała.

— Roger Krueger

37

Możesz użyć tabindex

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

Wartość tabindex może pozwolić na ciekawe zachowanie.

Jeśli podano wartość „-1”, element nie może być tabulowany, ale można programowo nadać fokus elementowi (używając element.focus ()).
Jeśli zostanie podana wartość 0, element może zostać zogniskowany za pomocą klawiatury i wpaść w klawisze dokumentu. Wartości większe od 0 tworzą poziom priorytetu, przy czym 1 jest najważniejszy.

— Sarath Ak
źródło

1

Wow, dzięki fajna sztuczka. Dziękuję Ci! Inaczej nie wymyśliłbym tego.

— AVProgrammer

Oszczędność życia, dzięki. W Edge div może być skoncentrowany, ale nie w Chrome bez tej sztuczki. Zaakceptowana odpowiedź jest świetna, ale nie chcę dodatkowej części adresu URL.

— Cal

ocal życie. Działa dobrze z chromem i

— firefoxem

14

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

— Azad
źródło

Działa to dla mnie w Chromium / Chrome 46 tylko w połączeniu z$('#inner').focus();

— TNT

2

Chciałem zasugerować coś podobnego do Michaela Shimmina, ale bez sztywnego kodowania takich rzeczy jak element lub zastosowany do niego CSS.

Używam tylko jQuery do dodawania / usuwania klasy, jeśli nie chcesz używać jquery, potrzebujesz tylko zamiennika dla add / removeClass

- 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
źródło

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>

Rozwiń fragment kodu

— San Jing
źródło

0

Aby zrobić flashowanie na granicy, możesz to zrobić:

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

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

Spowoduje to, że ramka będzie świecić na czerwono przez 1 sekundę, a następnie usunie ją ponownie.

— Michael Shimmins
źródło