Bar: 1 version importeret

2022-08-02T08:31:58Z

1 version importeret

Ny side

==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.

[[Image:js_input.PNG|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.

<source lang='html4strict'>
<html>
<head>
<title>input</title>
<script type="text/javascript" language="JavaScript">
</source>
<source lang='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;
}
</source>
<source lang='html4strict'>
</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>
</source>

Filen med koden kan hentes i en [[media:js_input.zip|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.

{{webcode}}
[[Kategori:Javascript_input]]
[[kategori:HTML Form]]

Input text - Versionshistorie

Bar: 1 version importeret