CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

doncarnage Nybegynder

15. februar 2011 - 21:21 Der er 8 kommentarer og
1 løsning

Funktion til at rydde input felter

Goddag,

Jeg kunne utrolig godt tænke mig en generel funktion til at rydde felter (inputs/textarea's). Felterne har en på forhånd sat tekst, der forsvinder når man klikker ind i feltet (dvs. ved focus). Default teksten skal dog komme tilbage hvis man klikker væk fra feltet igen uden at have foretaget nogle ændringer (dvs. skrevet noget).

Hvor finder jeg sådan en? Den skal både bruges til input felter og textarea's

Synes godt om

kdjweb Nybegynder

15. februar 2011 - 21:32 #1

onfocus="this.value=''" ?

Synes godt om

werd Nybegynder

16. februar 2011 - 00:27 #2

en hurtig løsning der skal implementeres for hvert tekstfelt:
<input type="text" name="navn" value="Dit navn" onblur="if(this.value.length == 0) this.value='Dit navn';" onclick="if(this.value == 'Dit navn') this.value='';" />

en løsning der virker lige meget hvor mange felter du har er: (husk at give dine elementer en name-attribute)

<html>
<head>
<script type="text/javascript">
var felttekster;
var enabled = false;
//var areatekster = [document.getElementsByTagName('textarea').length][2];
var senesteElement;
function feltFunktion(event){
if (!enabled) {gemTekster(); enabled=true;}
var targ, i;
if (senesteElement) {
if (senesteElement instanceof HTMLInputElement || senesteElement instanceof HTMLTextAreaElement) {
//alert(senesteElement+" "+senesteElement.value);
if (senesteElement.value.length==0) {
genskabElement(senesteElement);
}
}
}
if (!event) {var event=window.event;}
if (event.target) {targ=event.target;}
else if (event.srcElement) {targ=event.srcElement;}
if (targ.nodeType==3) {targ = targ.parentNode;} // defeat Safari bug

if (targ instanceof HTMLInputElement || targ instanceof HTMLTextAreaElement) {
targ.value = '';
}
// bruges når felt forlades
senesteElement = targ;
}

function genskabElement(element) {
if (element) {
var i;
for (i=0;i<felttekster.length; i++) {
if (felttekster[i][0]==element.name) {
element.value = felttekster[i][1];
}
}
}
}

function gemTekster() {
var i, t;
var felter = document.getElementsByTagName('input');
var areas = document.getElementsByTagName('textarea');
felttekster = new Array(2);
felttekster[0] = new Array(document.getElementsByTagName('input').length+document.getElementsByTagName('textarea').length);
felttekster[1] = new Array(felttekster[0].length)
for (i=0;i<felter.length; i++) {
felttekster[i][0] = felter[i].name;
felttekster[i][1] = felter[i].value;
}
for (t=0;t<areas.length; t++) {
felttekster[i][0] = areas[t].name;
felttekster[i][1] = areas[t].value;
i++;
}
}
</script>
</head>

<body onclick="feltFunktion(event);">
<input type="text" name="felt1" value="test">
<textarea name="felt2">test2</textarea>
</body>

</html>

Synes godt om

doncarnage Nybegynder

16. februar 2011 - 10:33 #3

Hej werd,

Det var netop en funktion, der kan genbruges jeg er på udkig efter så jeg ikke skal implementere for hvert eneste felt ;)

Jeg har prøvet med din funktion og den virker fint nok ved de to felter, men den virker ikke hvis jeg prøver at tilføje et ekstra - fx:

---------------------------------------------------------------------

<html>
<head>
<script type="text/javascript">
var felttekster;
var enabled = false;
//var areatekster = [document.getElementsByTagName('textarea').length][2];
var senesteElement;
function feltFunktion(event){
if (!enabled) {gemTekster(); enabled=true;}
var targ, i;
if (senesteElement) {
if (senesteElement instanceof HTMLInputElement || senesteElement instanceof HTMLTextAreaElement) {
//alert(senesteElement+" "+senesteElement.value);
if (senesteElement.value.length==0) {
genskabElement(senesteElement);
}
}
}
if (!event) {var event=window.event;}
if (event.target) {targ=event.target;}
else if (event.srcElement) {targ=event.srcElement;}
if (targ.nodeType==3) {targ = targ.parentNode;} // defeat Safari bug

if (targ instanceof HTMLInputElement || targ instanceof HTMLTextAreaElement) {
targ.value = '';
}
// bruges når felt forlades
senesteElement = targ;
}

function genskabElement(element) {
if (element) {
var i;
for (i=0;i<felttekster.length; i++) {
if (felttekster[i][0]==element.name) {
element.value = felttekster[i][1];
}
}
}
}

function gemTekster() {
var i, t;
var felter = document.getElementsByTagName('input');
var areas = document.getElementsByTagName('textarea');
felttekster = new Array(2);
felttekster[0] = new Array(document.getElementsByTagName('input').length+document.getElementsByTagName('textarea').length);
felttekster[1] = new Array(felttekster[0].length)
for (i=0;i<felter.length; i++) {
felttekster[i][0] = felter[i].name;
felttekster[i][1] = felter[i].value;
}
for (t=0;t<areas.length; t++) {
felttekster[i][0] = areas[t].name;
felttekster[i][1] = areas[t].value;
i++;
}
}
</script>
</head>

<body onclick="feltFunktion(event);">

<input type="text" name="felt1" value="test">

<br/><br/>

<textarea name="felt2">test2</textarea>

<br/><br/>

<input type="text" name="felt3" value="hmmm">

</body>

</html>

---------------------------------------------------------------------

Synes godt om

werd Nybegynder

16. februar 2011 - 13:54 #4

nu skulle det virke med flere inputs, og den skulle også tage højde for inputelementer der ikke er text:

<html>
<head>
<script type="text/javascript">
var felttekster, senesteElement;
function feltFunktion(event){
var targ, i;
if (!felttekster) {gemTekster();}
if (senesteElement) {
if ((senesteElement instanceof HTMLInputElement&&senesteElement.type=="text") || senesteElement instanceof HTMLTextAreaElement) {
if (senesteElement.value.length==0) {
for (i=0;i<felttekster.length; i++) {
if (felttekster[i][0]==element.name) {
element.value = felttekster[i][1];
break;
}
}
}
}
}
if (!event) {var event=window.event;}
if (event.target) {targ=event.target;}
else if (event.srcElement) {targ=event.srcElement;}
if (targ.nodeType==3) {targ = targ.parentNode;} // defeat Safari bug

if ((targ instanceof HTMLInputElement&&targ.type=="text") || targ instanceof HTMLTextAreaElement) {
if (targ.value==originalVaerdi(targ.name)) {
targ.value = '';
}
}
senesteElement = targ;
}

function gemTekster() {
var i, t, felt, felter;//, fields, areas;
fields = new Array();
t=0;
for (i=0; i<document.getElementsByTagName('input').length;i++) {
felt = document.getElementsByTagName('input')[i];
if (felt.type=="text") {fields[t]=felt;t++}
}
felter = fields;
felter = felter.concat(Array.prototype.slice.call(document.getElementsByTagName('textarea')));
felttekster = new Array(felter.length);
for (i=0;i<felttekster.length; i++) {
felttekster[i] = new Array(2);
felttekster[i][0] = felter[i].name;
felttekster[i][1] = felter[i].value;
}
}

function originalVaerdi(navn) {
if (navn) {
for (var i=0;i<felttekster.length; i++) {
if (felttekster[i][0]==navn) {
// returner original værdi
return felttekster[i][1];
}
}
}
return null;
}
</script>
</head>

<body onclick="feltFunktion(event);">

<input type="text" name="felt1" value="test">

<br/><br/>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
<br/><br/>
<textarea name="felt2">test2</textarea>

<br/><br/>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
<br/><br/>
<input type="text" name="felt3" value="hmmm">

<div id="ctrl" style="position:absolute; top:300px; width:100%; background-color:#ddd; border:1px solid black;"></div>
</body>

</html>

Synes godt om

werd Nybegynder

16. februar 2011 - 14:54 #5

det lader til at chrome og IE ikke kunne lige den måde jeg lavede arrayet på så jeg har gjort det manuelt. Af en eller anden grund vil IE9 bare stadig ikke gøre som jeg vil så det virker ikke der.

<html>
<head>
<script type="text/javascript">
var felttekster, senesteElement;
function feltFunktion(event){
var targ, i;
if (!felttekster) {gemTekster();}
if (senesteElement) {
if ((senesteElement instanceof HTMLInputElement&&senesteElement.type=="text") || senesteElement instanceof HTMLTextAreaElement) {
if (senesteElement.value.length==0) {
for (i=0;i<felttekster.length; i++) {
if (felttekster[i][0]==senesteElement.name) {
senesteElement.value = felttekster[i][1];
break;
}
}
}
}
}
if (!event) {var event=window.event;}
if (event.target) {targ=event.target;}
else if (event.srcElement) {targ=event.srcElement;}
if (targ.nodeType==3) {targ = targ.parentNode;} // defeat Safari bug
if ((targ instanceof HTMLInputElement&&targ.type=="text") || targ instanceof HTMLTextAreaElement) {
if (targ.value==originalVaerdi(targ.name)) {
targ.value = '';
}
}
senesteElement = targ;
//document.getElementById("last").innerHTML += senesteElement+" ";
}

function gemTekster() {
var i, t, felt, felter;//, fields, areas;
felter = new Array();
t=0;
for (i=0; i<document.getElementsByTagName('input').length;i++) {
felt = document.getElementsByTagName('input')[i];
if (felt.type=="text") {felter[t]=felt;t++;}
}
for (i=0; i<document.getElementsByTagName('textarea').length;i++) {
felt = document.getElementsByTagName('textarea')[i];
felter[t]=felt;
t++;
}
felttekster = new Array(felter.length);
for (i=0;i<felttekster.length; i++) {
felttekster[i] = new Array(2);
felttekster[i][0] = felter[i].name;
felttekster[i][1] = felter[i].value;
//document.getElementById("ctrl").innerHTML += felter[i].name+" "+felter[i].value+"<br><br>";
}
}

function originalVaerdi(navn) {
if (navn) {
for (var i=0;i<felttekster.length; i++) {
if (felttekster[i][0]==navn) {
// returner original værdi
return felttekster[i][1];
}
}
}
return null;
}
</script>
</head>

<body onclick="feltFunktion(event);">

<input type="text" name="felt1" value="test">

<br/><br/>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
<br/><br/>
<textarea name="felt2">test2</textarea>

<br/><br/>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
<br/><br/>
<input type="text" name="felt3" value="hmmm">

<div id="ctrl" style="position:absolute; top:270px; width:90%; background-color:#ddd; border:1px solid black;"></div>
<div id="last" style="position:absolute; top:430px; width:90%; background-color:#ddd; border:1px solid black;"></div>
</body>

</html>

Synes godt om

doncarnage Nybegynder

16. februar 2011 - 15:39 #6

Det holder desværre ikke hvis det ikke virker i IE 9 og/eller andre browsere, da siden og scriptet gerne skal kunne bruges ved alle "nyere" browser-typer :/

Synes godt om

werd Nybegynder

16. februar 2011 - 15:58 #7

Så må du lede efter en løsning. Problemet så vidt jeg kunne se var at IE9 håndterer klikket på en anden måde og jeg får fat i objektet med targ=event.srcElement; Problemet opstår i det følgende hvor IE9 nægter at evaluere udtrykket i den første if. Jeg har kigget i dokumentationen af IE9s implementation af instanceof men blev ikke meget klogere. Held og lykke

if ((targ instanceof HTMLInputElement&&targ.type=="text") || targ instanceof HTMLTextAreaElement) {
if (targ.value==originalVaerdi(targ.name)) {
targ.value = '';
}
}

Synes godt om

doncarnage Nybegynder

16. februar 2011 - 16:21 #8

Allrighty then, jeg prøver at kigge videre på det..

Men nu hvor jeg lige har dig, kan man så ikke få indhold i inputs og textarea's til at blive "gendannet" både når man trykker på F5/opdaterer siden OG når man trykker enter oppe i titellinjen?

Lige nu gør den det nemlig kun ved sidstnævnte :S

Synes godt om

werd Nybegynder

16. februar 2011 - 16:44 #9

tror det er noget browseren gør for at dit input ikke skal gå tabt - du kan evt trykke ctrl+f5 - så genindlæser den fuldstændigt :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS