Miten saa input textin samantien aktivoiduksi, kun sivu ladataan? Tarkoitan siis sitä, että siinä vilkkuu samantien se kursori, eikä sitä tarvitse erikseen klikata jotta siihen voi kirjoittaa.
Näin pitäisi toimia:
window.onload = function () {
document.getElementById("tekstiboxsi").focus();
}Jos jaksat jonkun JavaScript-kirjaston ottaa käyttöön, esim. jQuery, niin sillä tuon saa toimimaan vielä aavistuksen paremmin. window.onload tapahtuu vasta sitten kun ihan kaikki sivulla on ladattu, kuvat mukaanlukien, joten tekstilaatikko saattaa joskus aktivoitua vasta pitkän hetkenkin sen jälkeen kun käyttäjä on voinut jo tehdä asioita sivulla. Kirjastoissa tähän on yleensä kiinnitetty huomiota, joten on mahdollista tehdä suht lyhyellä koodilla heti varsinaisen sivun latauduttua tarpeelliset toiminnot, eikä tarvitse odotella kuvia ym. tavaraa mitä sivulla on.
jQuery-esimerkki:
$(function(){
$('#tekstiboksi').focus();
});Kannattaa myös miettiä, onko mahdollista (tai järkevää) muuttaa HTML:n järjestystä siten, että laatikko aktivoituisi ensimmäisenä. Aina se ei tietenkään ole mahdollista, mutta joissakin tapauksissa on.
Ajattelin että tähän olisi ollut CSS:n tai HTML:n puolelta joku valinta. Näin ei ilmeisesti ole. Noh, pitänee tehdä javascriptillä sitten.
Merri kirjoitti:
Kannattaa myös miettiä, onko mahdollista (tai järkevää) muuttaa HTML:n järjestystä siten, että laatikko aktivoituisi ensimmäisenä. Aina se ei tietenkään ole mahdollista, mutta joissakin tapauksissa on.
Pystyykö tämän siis toteuttamaan jotenkin ilman js:ää, vaikka formi on keskellä sivua (toisinsanoen jokin elementti on jo ennen formia)?
Ei ole, kyseessä on toiminnallisuus, joten se on JavaScriptin heiniä.
Merri kirjoitti:
Ei ole, kyseessä on toiminnallisuus, joten se on JavaScriptin heiniä.
Jepjep. Minun logiikallani tämä olisi onnistunut kun kerran checkboxit ja raxdiobuttonitkin saa HTML:llä suoraan valittua. Noh, ei voi mitään.
punppis kirjoitti:
Jepjep. Minun logiikallani tämä olisi onnistunut kun kerran checkboxit ja raxdiobuttonitkin saa HTML:llä suoraan valittua. Noh, ei voi mitään.
Kerropas miten tuo tapahtuu? Eli siis että jossain keskellä sivulla checkbox on valittuna eli aktivoituna (ei siis välttämättä ruksittuna) ja sen saa ruksittua tai ruksin poistettua painamalla välilyöntinäppäintä?
Sitten kun saat tämän tehtyä (joka siis kertomasi mukaan onnistuu) niin teet vaan saman textboxille.
punppis: aktivointi on eri asia kuin se, että jollain elementillä on valmiiksi jokin arvo. Tekstikenttiinkin siis saa valmiiksi tekstiä, jos verrataan "ruksaamiseen".
Lomakekenttiin saa muuten tabindex-arvon. En ole koskaan tullut kokeilleeksi aiheuttaako tämä sen, että sarkainta painamalla se kenttä jolla on tabindex="1" tulisi aktiiviseksi. Juuri nyt en ehdi kokeilla moista.
Kyllä tämäkin toimii jos javascript on selaimessa sallittu
<body OnLoad="document.form.las.focus();"> <form action="" method="POST" name="form"> <input type='text' name='las' size='50'> <input type='submit' value=' Lähetä '> <input type='reset' value='Tyhjennä'> </form>
Tuo on käytännössä sama kuin window.onload, mutta kirjoitettuna HTML-attribuuttiin. HTML:n kautta lisättynä JavaScriptistä että HTML:stä tulee aika pian sekametelisoppaa, vaikka yksinkertaisiin temppuihin se soveltuukin.
Tämäkin toki onnistuu ja tarjoaa parhaimman toimivuuden ilman kirjaston lisäämistä...
<body>
<form><p><input id="punppis" name="jei" type="text" /> <button type="submit">Menoksi</button></p></form>
</body>
<script type="text/javascript">document.getElementById('punppis').focus();</script>
</html>... mutta ei täytä suosituksia siitä, että skriptielementtien tulisi olla määritettynä sivun headin lopussa (paremman sivun kokonaislatautuvuuden takia). Muistaakseni skriptielementin tulisi myös aina olla määriteltynä nimenomaan headissä, eli tämä tuottaa virheen validaattorissa.
Toi ominaisuus saisi olla HTML:ssä tai CSS:ssä
Tässä joutessani sitten piti kokeilla jQueryllä tabindexin hyväksikäyttöä:
<!DOCTYPE html>
<html>
<head>
<title>Fookustesti</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){$("*[tabindex=1]").focus();});</script>
</head>
<body>
<p><a href="">Estelinkki</a></p>
<form><p><input type="text" tabindex="1" value="Fookus ensin?" /></p></form>
</body>
</html>Ilman JavaScriptiä ensimmäinen elementti joka saa fokuksen sivulta on tabindexin sisältävä elementti, skriptien kanssa ladataan Googlecodesta/välimuistista jQuery ja sitten laitetaan fookus ykköstabindexin sisältävään elementtiin.
Ehkei nyt sentään siisteimmän näköinen ratkaisu, mutta lienee toiminnallisesti järkevin yleispätevä ratkaisu ja vaatii vain pari riviä.
Parempi virheentarkistus:
$(function(){var f=$("*[tabindex=1]");if(f)f.focus();});Kaikkea sitä tekee kun jollakulla kestää kauan omissa civivuoroissaan...
Siis tabindexin saa myös näin:
<form> <div><input tabindex="4" size="30" name="vimppa" value="Tabulointijärjestyksessä 4." /><br /> <input tabindex="2" size="30" name="toka" value="Tabulointijärjestyksessä 2." /><br /> <input tabindex="1" size="30" name="eka" value="Tabulointijärjestyksessä 1." /><br /> <input tabindex="3" size="30" name="kolmas" value="Tabulointijärjestyksessä 3." /> </div></form>
...Kuten aiemmassa viestissä jo demonstroitiin. JavaScripti tuo tuohon siis sen lisäarvon, että kohdistus siirtyy elementtiin suoraan sivulatauksessa, ilman JS:ää surffailija joutuu tabittamaan formiin saakka (jossa sitten kohdistetaan elementtiin, jolla on tabindex 1).
Aihe on jo aika vanha, joten et voi enää vastata siihen.