JavaScript på svenska - onFocus och text i textruta

©ilj@flowsim.se
JavaScript på svenska 10
JavaScript onFocus och JavaScript focus()
Klicka på en knapp och använd därefter TAB-tangenten för att flytta focus mellan knapparna.

Knappen ovan (med ID='mydiv') förses med ny text när den hamnar i focus. JavaScript-koden ser ut så här:

document.getElementById('mydiv').onfocus=iljt;
document.getElementById('mydiv').onblur=iljs;
function iljs()
{
document.getElementById('mydiv').value='just lost focus'
}

function iljt()
{
document.getElementById('mydiv').value='just got focus'
}

Knappen ovan styrs helt av javascriptet men man kan också använda HTML:s ONFOCUS. HTML-taggen för en knapp som ändrar utseende vid ONFOCUS kan då se ut så här:

<INPUT TYPE="button"
STYLE="background-color:#cccccc;margin:2px;"
VALUE="knapptext"
ONFOCUS="this.style.background='red'"
ONBLUR="this.style.background='#cccccc'">

ONBLUR är motsatsen till ONFOCUS.

HTML-taggen för ett formulär med en textruta som reagerar på ONFOCUS kan se ut så här:

<FORM NAME = "textform>
<INPUT TYPE = "text"
VALUE = ""
NAME = "textruta"
ONFOCUS = "focustest()">
</FORM>

Formen har fått namnet textform och textrutan har fått namnet textruta.
När man klickar i textrutan anropas funktionen focustest() som skriver text i rutan. Den funktionen finns förklarad i exempel 8 under JAVASCRIPT. Så här ser den ut:

startad=0
function focustest()
{
if(startad==0)
{
startad=1
iljtext1()
}
}

som i sin tur, första gången man klickar i rutan, anropar funktionen iljtext1()

i = 0
j=0
function iljtext1()
{
texten = "flowsim flowsim"
document.textform.textruta.value =texten.substring(0,i) + "|"
iljtimer=setTimeout("iljtext1()",500)//1
i++
if(i==texten.length+2)
{
document.textform.textruta.value = " "
i=0
j=j+1
}
if(j==50)
{
clearTimeout(iljtimer)//2
startad=0
j=0
}
}

//1
Den här raden startar timern som bestämmer hur snabbt texten skrivs. Var 500:e millisekund anropas funktionen för att skriva ett tecken.
//2
Här stoppas timern.

Man kan placera focus på ett bestämt ställe genom att använda focus() Om man till exempel har en textruta som heter text1 på ett formulär som heter form1 och vill placera focus i textrutan när sidan laddats klart kan man skriva så här efter BODY ONLOAD:

document.form1.text1.focus()

Om du klickar i den här rutan kommer du till sidan om last modified!

Fler Javaskript-exempel: