Mer om formulär

I förra avsnittet om formulär handlade det mest om hur man kan snygga till formulären. Här tänker jag ta upp ytterligare några metoder.

Bara små bokstäver
Ibland är det viktigt att det som skrivs i formuläret inte innehåller stora bokstäver. Med den här metoden ändras alla versaler till gemener.

<FORM name="gemener">
<INPUT type="text" name="gemen" size=40 value="" onChange="javascript:this.value=this.value.toLowerCase();"><BR>
<INPUT type="button" value="OK">
</FORM>

Bara stora bokstäver
Naturligtvis kan vi göra tvärtom, och ändra allt till stora bokstäver:

<FORM name="versaler">
<INPUT type="text" name="versal" size=40 value="" onChange="javascript:this.value=this.value.toUpperCase();"><BR>
<INPUT type="button" value="OK">
</FORM>

Fokus i rätt ruta
Den här metoden kan vi använda för att se till att markören redan från början hamnar i rätt ruta i formuläret:

Skriptet placerar vi i HEAD-elementet:

<SCRIPT language="JavaScript">
<!-- Göm
function Fokus(form, ruta)
{
if (document.forms.length > 0)
{
document.forms[form].elements[ruta].focus();
}
}
// Sluta gömma -->
</SCRIPT>

En händelsehanterare läggs i den inledande BODY-taggen: 

<BODY onLoad="Fokus(0,1);">

Formuläret placeras i BODY-elementet: 

<FORM>
<INPUT type="text" name="ruta_0" size="20" size="12"><br>
<INPUT type="text" name="ruta_1" size="20" size="12"><br>
<INPUT type="text" name="ruta_2" size="20" size="12">
</FORM>

Om du har klickat någonstans på sidan, har fokus flyttats från formuläret. Du kan då uppdatera sidan.



function Fokus(form,ruta)
Värdena på "form" och "ruta" hämtas från händelsehanteraren onLoad i den inledande BODY-taggen när funktionen anropas därifrån.

if (document.forms.length > 0)
Om det finns formulär på sidan ...

document.forms[form].elements[ruta].focus();
... skall fokus läggas på formuläret med index "form" i elementet med index "ruta".

onLoad="Fokus(0,1);"
När sidan är laddad anropas funktionen Fokus, där form får värdet 0 och ruta värdet 1. Det gör att fokus placeras på det första formuläret (formuläret med index 0) i dess andra element (elementet med index 1). Tänk på att index räknas från 0!

För att få fokus på rätt ruta har jag angett onLoad="Fokus(2,1)"; på den här sidan. Observera att sidan automatiskt "bläddras ned" när den har laddats, så att rutan med fokus blir synlig.

Ett annat sätt att lägga fokus på rätt ruta

Metoden nedan gör samma sak, men eftersom vi använder namen på såväl formuläret som rutan behöver vi inte räkna fram rätt formulär och element.

Skriptet lägger vi i HEAD-elementet:

<SCRIPT LANGUAGE="JavaScript">
<!-- Göm
function fokusForm() {
document.form4.ruta_2.focus();
}
// Sluta gömma -->
</SCRIPT>

En onLoad i den inledande BODY-taggen anropar funktionen:

<BODY onLoad="fokusForm()">

Formuläret placeras i BODY-elementet:

<FORM NAME="form4" method="post" action="dinadress@leverantör.domän">
<INPUT type="text" name="ruta_1" size="20"> Ruta 1<BR>
<INPUT type="text" name="ruta_2" size="20"> Ruta 2<BR>
<INPUT type="text" name="ruta_3" size="20"> Ruta 3<BR>
<INPUT type="submit" name="skicka" value="Skicka">&nbsp;&nbsp;<INPUT type="reset" value="Rensa" onclick="fokusForm();">
</FORM>

document.form4.ruta_2.focus();
Betyder: I det redan öppna dokumentet finns formuläret form4 med ett element som heter ruta_2. Sätt fokus på detta.

Två sätt att hindra att besökaren ändrar texten i ett formulär

Den första metoden gör att så snart rutan får fokus, förlorar den fokus igen.
   

<FORM name="form">
<INPUT type=text name=ruta value="Texten kan inte ändras!" onFocus="this.blur()" size=20>
</FORM>

eller:

   

<FORM name="form">
<INPUT type=text name=ruta value="Texten kan inte ändras!" onChange="this.value='Texten kan inte ändras!';" size=20 readonly>
</FORM>

Den andra metoden medför att om innehållet i rutan ändras, återfår den sitt ursprungliga innehåll så snart besökaren klickar utanför rutan. Om vi utesluter tillägget "readonly" i slutet av INPUT-taggen, kan besökaren klistra in text i rutan. Denna nya text försvinner dock så snart han klickar utanför rutan.

Det här fungerar bra i Netscape 6 och Internet Explorer, men i Netscape 4 går det att klistra in text trots "readonly". Däremot återkommer rätt text när man klickar utanför rutan.

Endast en ruta får fyllas i

I nästa formulär har vi två textrutor, men besökaren får bara fylla i den ena. Han får dessutom inte skicka formuläret utan att den ena uppgiften är ifylld.

I HEAD-elementet:

<SCRIPT LANGUAGE="JavaScript">
<!-- Göm
function enUppgift()
{
namn = document.form7.namn.value;
epost = document.form7.epost.value;
if ((namn == "") && (epost == ""))
{
alert("Skriv antingen ditt namn eller din e-postadress.");
return false;
}
else return true;
}
// Sluta gömma -->
</SCRIPT>

I BODY-elementet:

<FORM method="post" action="mailto:din_epostadress@leverantör.domän" name="form7" enctype="text/plain" onSubmit="return enUppgift()">
Skriv antingen ditt namn eller din e-postadress:<BR><BR>
Namn:<BR>
<INPUT type="text" name="namn" value="" onFocus="document.form7.epost.value='';" size="10"><BR>
eller e-postadress:<BR>
<INPUT type="text" name="epost" value="" onFocus="document.form7.namn.value='';" size="10"><BR>
<INPUT type="submit" value="Skicka">
</FORM>

if ((namn == "") && (epost == ""))
När besökaren klickar på "Skicka" anropas funktionen enUppgift(). Variablerna "namn" och "epost" får värden från formuläret form7. Sedan kontrolleras om både "namn" och "e-post" är tomma. I så fall öppnas en meddelanderuta och när besökaren stänger denna skickas han tillbaka till formuläret. Om bara den ena är tom, skickas formuläret.

onFocus="document.form7.namn.value='';"
Observera att de med rött markerade citationstecknen är två enkla citationstecken direkt efter varandra.

De båda första INPUT-taggarna innehåller var sin onFocus. När den ena rutan får fokus, töms den andra, och tvärtom.

Verifiera lösenordet

Det här fungerar i Netscape 6 och Internet Explorer, men inte i Netscape 4. Har besökaren skrivit rätt lösenord? Vi kontrollerar detta innan formuläret skickas:

I HEAD-elementet:

<SCRIPT language="JavaScript">
<!-- Göm
function kollaSesam()
{
    sesam1 = document.form8.sesam1.value;
    sesam2 = document.form8.sesam2.value;
if (sesam1 != sesam2) {
    alert ("Du skrev inte samma lösenord båda gångerna. Försök igen.")
return false;
}
else return true;
}
// Sluta gömma -->
</SCRIPT>

I BODY-elementet:

<FORM name="form8" onSubmit="return kollaSesam(this)">
Lösenord:<BR>
<INPUT type=password name=sesam1 size=10><BR>
Skriv lösenordet en gång till:<BR>
<INPUT type=password name=sesam2 size=10><BR>
<INPUT type=submit value="Skicka!">
</FORM>

När du klickar på Skicka, efter att ha fyllt i samma lösenord två gånger, flyttas du uppåt på sidan. Det beror på att det där finns ett formulär som får fokus när sidan laddas.
Lösenord:

Skriv lösenordet en gång till:

if (sesam1 != sesam2)
Om de båda inskrivna lösenorden inte är identiska ...

alert ("Du skrev inte samma lösenord båda gångerna. Försök igen.")
... öppnas en meddelanderuta.

<INPUT type=password name=sesam1 size=10>
När vi anger type=password, kommer texten som skrivs in i rutan att ersättas med asterisker.

Markera allt

För att gör det lätt för besökaren att kopiera text från en textarea, kan vi lägga till en knapp som markerar innehållet;

<FORM>
<INPUT type=button value="Markera allt" onClick="javascript:this.form.texten.focus();this.form.texten.select();"><BR>
<TEXTAREA name="texten" rows="3" cols="55" wrap="virtual">
Texten som skall markeras.
</TEXTAREA>
</FORM>
   
   

onClick="javascript:this.form.texten.focus();this.form.texten.select();"
När besökaren klickar på knappen får textarean "texten" fokus och innehållet blir markerat.

Kopiera allt

Men vi kan ju kopiera det också. Observera att det här skriptet inte fungerar i Netscape, eftersom det innehåller metoder som är specifika för IE.

<FORM name="form9">
<INPUT type="button" value="Kopiera texten (IE)" name="kopiera" onClick="document.form9.texten.createTextRange().execCommand('Copy')">
<TEXTAREA name="texten" rows="3" cols="40" wrap="virtual">
I Internet Explorer kopieras den här texten automatiskt. I Netscape måste du själv markera och kopiera texten.
</TEXTAREA>
</FORM>

När besökaren klickar på knappen, används den för Internet Explorer specifika funktionen createTextRange följd av den likaledes IE-specifika execCommand.

Klicka på "Kopiera texten (IE)", öppna texteditorn och tryck Ctrl+V.

Kopiera sidan

En variant är att använda en knapp som gör att besökaren kan kopiera hela sidan:

<FORM name="form10">
<INPUT type="button" value="Kopiera sidan (IE)" name="kopiera" onClick="body.createTextRange().execCommand('Copy')">
</FORM>

"objekt.createTextRange().execCommand('Copy')"
Den här metoden kan användas på BODY, BUTTON, INPUT type=button, INPUT type=hidden, INPUT type=password, INPUT type=reset, INPUT type=submit, INPUT type=text och TEXTAREA. Se till att du ersätter "objekt" med rätt element.

© SupportData.Net