html - Eksempeltekst i inputfields - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html form input

<< < 1 2 3 4 5 > >>

Bruger #17072 @ 18.04.12 09:31

Hej
Jeg er igang med at lave et loginsystem, som allerede virker lige som det skal. Dog vil jeg gerne have noget eksempel tekst i felterne username og password, ligesom der er ved loginsystemet her på udvikleren.dk.
Lige nu ser min formular således ud:

HTML kode

 <form name="login" action="http://localhost/eksamensprojekt/inc/auth.php" method="post">
 Brugernavn: <input type="text" name="username" value="username" /> Password: <input type="password" name="password" value="password" /> <input type="submit" name="submit" value="Log ind" />
 </form>

Lige nu skal brugeren selv slette det der allerede står i felterne, hvilket ikke er så smart. Jeg fandt noget på nettet omkring mit problem, hvor der blev foreslået at jeg skrev

HTML kode

 onfocus=value=""

i mit input-field, men det gav desværre ikke noget resultat.
Hvad kan jeg gøre for at det kommer til at virke, som jeg godt kunne tænke mig?

42 svar postet i denne tråd vises herunder
10 indlæg har modtaget i alt 38 karma

Sorter efter stemmer Sorter efter dato

Bruger #14602 @ 18.04.12 09:44

Brug placeholder..

altså:

<input type="text" placeholder"DIN TEKST HER" name="">

Bruger #17072 @ 18.04.12 10:05

152

Har indsat placeholder istedet for value:

HTML kode

 <form name="login" action="http://localhost/eksamensprojekt/inc/auth.php" method="post">
 Brugernavn: <input type="text" name="username" placeholder="username" /> Password: <input type="password" name="password" password="password" /> <input type="submit" name="submit" value="Log ind" />
 </form>

Men det forsvinder ikke, hverken når jeg begynder at skrive noget, eller når jeg klikker i feltet

Bruger #17072 @ 18.04.12 11:27

152

Hvis det er HTML5, så burde det virke på min pc, fordi jeg har IE9, Google Chrome 18 og Firefox 11, som alle skulle understøtte HTML5.
Men hvordan skal jeg lave det i javascript, hvis det skal virke?

Bruger #17072 @ 18.04.12 12:10

152

Nu kan mine browsere jo bruge HTML5, så spørgsmålet er om jeg skal droppe HTML5 placeholder og så bruge udelukkende javascript?

Bruger #3427 @ 18.04.12 12:26

1.520

Nu kan mine browsere jo bruge HTML5, så spørgsmålet er om jeg skal droppe HTML5 placeholder og så bruge udelukkende javascript?

nu er der vel andre end dig der skal besøge din hjemmeside?
jeg ville lave det med placeholder + fallback.

Bruger #17015 @ 18.04.12 17:15

614

Den rigtige måde er som andre nævner at bruge HTML5 løsningen hvis den er der, og ellers loade et polyfill ind.

http://html5please.com/#input[placeholder]
http://caniuse.com/#search=placeholder
https://github.com/mathiasbynens/jquery-placeholder

Og til at tjekke om du skal loade et polyfill ind kan du bruge: http://yepnopejs.com/

Indlæg senest redigeret d. 18.04.2012 17:16 af Bruger #17015

Bruger #17081 @ 18.04.12 21:23

1.258

Den rigtige måde er som andre nævner at bruge HTML5 løsningen hvis den er der, og ellers loade et polyfill ind.

http://html5please.com/#input[placeholder]
http://caniuse.com/#search=placeholder
https://github.com/mathiasbynens/jquery-placeholder

Og til at tjekke om du skal loade et polyfill ind kan du bruge: http://yepnopejs.com/

Hmn er det ikke bedre, at bruge modernizer til, at checke efter placeholder support, og så bruge den indbyggede loader i modernizer (som tilfældigvis er yepnope) til, at loade polyfilen

Bruger #17015 @ 18.04.12 23:14

614

@dan, det kommer an på om placeholder er det eneste du vil tjekke for. Hvis det er det, så er det nok lidt overkill at loade modernizr ind :-) Der er en grund til at de gjorde yepnope til et selvstændigt modul :-)

Bruger #17072 @ 19.04.12 10:31

152

Du har ret igen :-)

Så mit bud, på vores fælles bud, ser cirka sådan her ud:
JScript kode
 if (!('placeholder' in document.createElement('input'))) { $.getScript("placeholder_polyfill.js" }
Men...

Det tager jo tid at loade det asynkront og et placeholder polyfill, burde ikke fylde ret meget. Desuden er det jo vigtigt, at placeholder værdier vises med det samme, hvis man bruger dem som labels for sine felter, så de er der, selv hvis man har en bruger der med det samme går i gang med at bruge felterne. Derfor burde jo lave det inline, så superbrugerne ikke skal vente på at det bliver hentet efter page load. Desuden bør det jo ikke afhænge af jQuery - det er jo et stort library, og det er et simpelt problem vi har.

JScript kode
 if (!('placeholder' in document.createElement('input'))) { 
   var inputArray = document.getElementsByTagName('input');
   for (var i = 0; i < inputArray.length; i++) {
     if ((inputArray[i].getAttribute('type') == 'text') && (inputArray[i].getAttribute('placeholder') != '')) {
       if ((inputArray[i].getAttribute('value') === '') || (inputArray[i].getAttribute('value') === null)) {
         inputArray[i].setAttribute('value', inputArray[i].getAttribute('placeholder'));
       }
       inputArray[i].onblur = function() { (function(el) {
         if (el.getAttribute('value') === '') {
           el.setAttribute('value', el.getAttribute('placeholder'));
         }
       })(this); };
       inputArray[i].onfocus = function() { (function(el) {
           if (el.getAttribute('value') === el.getAttribute('placeholder')) {
             el.setAttribute('value', '');
           }
       })(this); };
     }
   }
 }
Så skal det jo bare minifies... :p

Test på jsFiddle: http://jsfiddle.net/REqUH/

Har testet din kode, men det virker ikke på mit site. Dog virker det upåklageligt på jsFiddle, som du linker til.
Min kode ser således ud:

HTML kode

 <form name="login" action="http://localhost/eksamensprojekt/inc/auth.php" method="post">
 Brugernavn: <input type="text" name="username" data-placeholder="username" /> Password: <input type="password" name="password" data-placeholder="password" /> <input type="submit" name="submit" value="Log ind" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="js/value.js"></script>
 </form>

Det virker på jsFiddle når jeg indsætter mine input-fields, men så burde det jo også virke på mit site eller hvordan?

Bruger #17081 @ 19.04.12 10:52

1.258

Du har ret igen :-)

Så mit bud, på vores fælles bud, ser cirka sådan her ud:
JScript kode
 if (!('placeholder' in document.createElement('input'))) { $.getScript("placeholder_polyfill.js" }
Men...

Det tager jo tid at loade det asynkront og et placeholder polyfill, burde ikke fylde ret meget. Desuden er det jo vigtigt, at placeholder værdier vises med det samme, hvis man bruger dem som labels for sine felter, så de er der, selv hvis man har en bruger der med det samme går i gang med at bruge felterne. Derfor burde jo lave det inline, så superbrugerne ikke skal vente på at det bliver hentet efter page load. Desuden bør det jo ikke afhænge af jQuery - det er jo et stort library, og det er et simpelt problem vi har.

JScript kode
 if (!('placeholder' in document.createElement('input'))) { 
   var inputArray = document.getElementsByTagName('input');
   for (var i = 0; i < inputArray.length; i++) {
     if ((inputArray[i].getAttribute('type') == 'text') && (inputArray[i].getAttribute('placeholder') != '')) {
       if ((inputArray[i].getAttribute('value') === '') || (inputArray[i].getAttribute('value') === null)) {
         inputArray[i].setAttribute('value', inputArray[i].getAttribute('placeholder'));
       }
       inputArray[i].onblur = function() { (function(el) {
         if (el.getAttribute('value') === '') {
           el.setAttribute('value', el.getAttribute('placeholder'));
         }
       })(this); };
       inputArray[i].onfocus = function() { (function(el) {
           if (el.getAttribute('value') === el.getAttribute('placeholder')) {
             el.setAttribute('value', '');
           }
       })(this); };
     }
   }
 }
Så skal det jo bare minifies... :p

Test på jsFiddle: http://jsfiddle.net/REqUH/

@Gustav ... jeg ved ikke engang hvor slemt det er, at loade jquery, der er så mange sites, der bruger det, at det oftest er i cache det meste af tiden alligevel

Hvis du ikke bruger jquery, bruger du så andre "spændende" libraries / frameworks der er værd, at notere?

<< < 1 2 3 4 5 > >>

Eksempeltekst i inputfields

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler