15. februar 2011 - 21:21Der 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
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>
<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>
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>
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>
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 :/
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 = ''; } }
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?
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 brugerNybegynder
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.