Ustawianie fokusu na ukrytym polu tekstowym za pomocą JavaScriptu

Question

Jak ustawić fokus na ukrytym elemencie textbox?

Próbowałem za pomocą

document.getElementById("textControl_fd_component_JSON_TASK_NStext64").focus; 

Ale to nie działa tutaj

alert(document.activeElement.id); returns null. 

Kiedy zrobiłem to pole widoczne powyżej skrypt działał w porządku.

Jakieś domysły, w których źle rozumiem?

Answer 1

Nie sądzę, że jest to dozwolone, przynajmniej w IE. Mam tę informację od jQuery's focus page.

Answer 2

Jeśli naprawdę trzeba to zrobić, należy pole przejrzyste, nie kryje:

opacity:0; 
filter:alpha(opacity=0); 

Ewentualnie, jeśli chcesz mieć pewność, że użytkownik nie przypadkowo kliknij go, wystarczy umieścić wkład Wewnątrz div z

width: 0; 
overflow: hidden; 

jednak, nie jest z pewnością lepszy sposób robić to, co chcesz, może za pomocą keydown/keypress wydarzenia.

Answer 3

Korzystanie Apsillers odpowiedź, moje ustawienia dla tej samej sytuacji zaangażowanych:

1. div rodzic z position: relative;
2. pozycja elementu formularza dziecka: bezwzględna; indeks z: 0; nieprzezroczystość: 0; filter: alpha (nieprzezroczystość = 0);
3. druga pozycja elementu potomnego: absolutna; z-index: (wartość> 0) (ustawiony tak, aby pokrywał przezroczyste wejście).

Odpowiedź Aspillera jest poprawna, zważywszy na zadane pytanie, ale chciałem podać praktyczny przykład tego, kiedy jest to konieczne.

W szczególności, elementy formularzy mogą być ukryte, jeśli używasz dowolnego skryptu/wtyczki, która wprowadza "wymyślne" dane wejściowe (np. Elementy radiowe/kontrolne, wybrane elementy). Ale jeśli twój skrypt lub wtyczka jest źle napisana, może to wyeliminować dostęp do klawiatury. Zachowanie płynności formularza poprzez umożliwienie wszystkim elementom skupienia się może uratować wiele bólów głowy dla użytkowników witryny.

Answer 4

Możesz dodać js, jeśli potrzebujesz obejścia i nie możesz zmienić wartości atrasu nieprzezroczystości.

/* bind a click handler to your trigger */ 
jQuery('#your-search-trigger').on('click', function searchIconEventhandler (event) { 
    /* in case your field is fading, cheat a little (check css transition duration) */ 
    setTimeout (function timeoutFunction() { 
     /* show the cursor */ 
     jQuery('#your-search-input').focus(); 
    }, 100); 
});