Input text

Fra Kommunikation-IT Holstebro HTX
Skift til: navigering, søgning

Hvordan anvendes et input i text-felt

Hvis man i et program skal have tal eller tekst ind i programmet så er input i et text-felt en lidt besværlig måde at gøre det på, men til gengæld giver den brugeren nogle fordele der kan være at foretrække.

For at lave inputtet skal man have et HTML-input tag der kan se ud som følger:

<input type="text" id="talInd">

id="talInd" er det navn vi giver input-feltet. Det skal være unikt i koden, så javascript-fortolkeren ikke kan være i tvivl om at det er lige netop dette felt vi vil hente fra

Resten af HTML-tagget skal se ud som vist, så det giver et Input Text felt som vist her.

Eksempel på et Input text felt, sammen med en Input Button


Programlinien for at hente det indtastede i javascript er:

minVar = document.getElementById("talInd").value;

minVar er den variabel det indtastede ender i når programlinien udføres.

document.getElementById() er den metode der kan finde input text-feltet ved hjælp af det ID (navnet), og "talInd" er det ID der skal søges efter i HTML-koden.

.value angiver at når input text-feltet er fundet i koden, så er det værdien i feltet der skal hentes.

Det der giver en del ekstra kode til denne metode er at man skal have angivet at nu er tallet indtastet, og der skal gøres noget ved det.

Metoden er illustreret i eksemplet herunder, og går ud på at man skal klikke på en knap, for at angive at tallet er indtastet, og når man klikker på knappen, så kaldes en funktion der henter tallet i det ene input text-felt, laver en beregning og lægger det over i et andet input text-felt.

input i text-felt med forslag til værdi

Man kan sætte en standardværdi i et input text-felt, der bliver resultatet, hvis brugeren ikke indtaster noget. Det gøres ved at skrive det ind i HTML-tagget:

<input type="text" id="talInd" value="67">

I programmeringssprog kaldes værdien for en default værdi.

Eksempel på anvendelse af input i text-felt

Koden viser først lidt forklaring, og har et input text-felt op, hvor man kan indtaste et tal.

Når tallet er indtastet og man har klikket på knappen, så kommer tallet gange 2 ovre i et andet input text-felt.

 <html>
 <head>
   <title>input</title>
 <script type="text/javascript" language="JavaScript">
 // Funktion der fanger en indtastning
 function fordoble () {
   tal = document.getElementById("talInd").value;
   tal = tal * 2;
   // Placerer beskeden nede i formularen
   document.getElementById("tekstUd").value = tal;
 }
 </script>
 </head>
 <body>
 <h1>input-bokse</h1>
 <p>input har mange funktioner - her som tekstfelt og knap.<br />Tekstfeltet har flere funktioner, både til input og output.</p>
 Indtast et tal : <input type="text" id="talInd"><br />
 Tryk på knappen <input type="button" value="Knappen" onClick="fordoble();"><br />
 Her er resultatet af beregningen : <input type="text" id="tekstUd" size="30" readonly="yes"><br />
 </body>
 </html>

Filen med koden kan hentes i en zip-fil

Fordele ved input i text-felt

Fordelen ved den metode er at det indtastede bliver stående i feltet, så længe siden ikke opdateres.

Ulemper ved input i text-felt

Ulempen er at brugeren er nødt til at angive at indtastningen er færdig på en eller anden måde - det kan være ved at trykke på en input_button der sender et signal til programmet at der skal ske noget, eller man kan lave mere avancerede teknikker, hvor man sætter et input_filter på så når brugeren f.x. trykker retur, så bliver tallet accepteret.