Problem wydaje się banalny; mam wrażenie, że HTML jest przeciwko mnie. Żeby za bardzo się nie rozpisywać – mam kod mniej-więcej taki:
<div class="container">
<input class="visible" />
<input class="hidden" />
<input class="hidden" />
</div>
W celu maksymalnego uproszczenia JS, zrobiłem jedynie jeden input
z klasą hidden
, ale docelowo będzie ich dwa lub trzy w tym miejscu. Taki jest do tego JS uruchamiany zaraz po wczytaniu DOM-u:
document.getElementsByClassName("hidden")[0].style.display = "none";
Chodzi o to, że chciałbym, by po aktywowaniu kontrolki input
z klasą visible
(coś jak zdarzenie focus
; chodzi o mysz, palec, klawiaturę i każdy inny sposób) pokazywały się wszystkie kontrolki z klasą hidden
, a po dezaktywowaniu te kontrolki chowały się (coś jak zdarzenie blur
). Najważniejsze, by po pokazaniu ukrytych kontrolek była możliwość wpisania tekstu do każdej z kontrolek (i tych ukrytych, i tych widocznych) i "zasubmitowania".
Tutaj ten uproszczony przykład online, tyle udało mi się zrobić: https://jsfiddle.net/8bnjwk0g/4/ Niestety, nie działa, ponieważ choć kontrolka się pokazuje, to zaraz znika, gdy próbować ją kliknąć.
UPDATE:
Właśnie przyszło mi do głowy, że mogę ich wcale nie ukrywać, a jedynie zrobić niewidocznymi, ale 1) także nie wiem, czy zadziała, a 2) to ostateczność – wolę, by było zgodnie z logiką.