Text i formulär ska försvinna/komma tillbaks

19 svar · 3 179 visningar · startad av silfver 14 jan. 2011

silfverMedlem sedan apr. 200312 679 inlägg

Frågan14 jan. 2011 11:17#1

Bästa titeln i dag. :)

Jag använder mig av följande kodsnutt:

<script type="text/javascript">
<!-- SEARCH BOX //-->
<!--
function clearBox(box) {
	 if(box.value==box.defaultValue) {
 	 	 box.value = "";
 	 }
 }
//-->

Till följande html:

<p><input id="searchfield" type="text" value="Bransch, taggar, områden" onfocus="clearBox(this);" /> <input id="searchsubmit" type="submit" value="Sök!" /></p

När man klickar i sökfältet så försvinner value-texten. Men om man klickar utanför formuläret så vill jag att texten ska komma tillbaks - förutsatt att man inte skrivit något.

Hur kan man göra då? :)

voigtann1Medlem sedan juni 20019 519 inlägg

14 jan. 2011 11:23#2

Om du kör HTML5 så kör attributet placeholder finns javascripts lösningar för de som inte ha den möjligheten Andrée har gjort en: https://github.com/peol/jquery.html5.placeholder

silfverMedlem sedan apr. 200312 679 inlägg

14 jan. 2011 11:36#3

voigtann1 skrev:

Om du kör HTML5 så kör attributet placeholder finns javascripts lösningar för de som inte ha den möjligheten Andrée har gjort en: https://github.com/peol/jquery.html5.placeholder

Senaste FireFox-versionen verkar inte stödja placeholder enligt: http://diveintohtml5.org/detect.html

Ska kolla Andrées lösning i stället. :)

voigtann1Medlem sedan juni 20019 519 inlägg

14 jan. 2011 11:39#4

silfver skrev:

Senaste FireFox-versionen verkar inte stödja placeholder enligt: http://diveintohtml5.org/detect.html

Sitter på 3.6.13 och om jag kör:

!function supports_input_placeholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}()

Så få jag true, så visst fungera det på den senaste Firefox versionen.

silfverMedlem sedan apr. 200312 679 inlägg

14 jan. 2011 11:44#5

Skriver jag följande:

<p><input id="searchfield" type="text" placeholder="Bransch, taggar, områden" /> <input id="searchsubmit" type="submit" value="Sök!" /></p>

Så fungerar det utmärkt i senaste versionen av Opera (mac). Men i Firefox så visas det ingen text. Alltså fungerar inte placeholder i senaste versionen för FF på mac?

r/ Utan någon javascript eller annat vill säga.

voigtann1Medlem sedan juni 20019 519 inlägg

14 jan. 2011 11:48#6

vad händer om du kör koden ovan i firebug, vad få du?

Spelar ju egentligen inte någon roll, då du behöver köra JS kod för de webbläsare som inte har stöd för det.

silfverMedlem sedan apr. 200312 679 inlägg

14 jan. 2011 12:03#7

voigtann1 skrev:

vad händer om du kör koden ovan i firebug, vad få du?

Spelar ju egentligen inte någon roll, då du behöver köra JS kod för de webbläsare som inte har stöd för det.

Var tusan prövar jag js-kod i firebug?

voigtann1Medlem sedan juni 20019 519 inlägg

14 jan. 2011 12:32#8

Console, sen har du en röd knapp nere i höger, tryck på den så få du så du kan skriva fler än en rad

silfverMedlem sedan apr. 200312 679 inlägg

14 jan. 2011 12:43#9

voigtann1 skrev:

Console, sen har du en röd knapp nere i höger, tryck på den så få du så du kan skriva fler än en rad

Haha, jag hittar ingenting. Vafan... :p

Men jag kör Andrées script och det fungerar ju jättebra. Tack för hjälpen. ;)

voigtann1Medlem sedan juni 20019 519 inlägg

14 jan. 2011 12:47#10

Se bild :P

silfverMedlem sedan apr. 200312 679 inlägg

14 jan. 2011 14:06#11

Haha :D Såg inte alls ut så för Mac men om jag körde Firebug i ett eget fönster kunde jag klistra in koden i fältet till höger. Fick mycket riktigt resultatet "true" också. :)

silfverMedlem sedan apr. 200312 679 inlägg

14 jan. 2011 15:50#12

Förresten. Finns det någon anledning till att man inte kan köra följande kod mellan <head>?

<script type="text/javascript">$('input[placeholder]').placeholder();</script>

voigtann1Medlem sedan juni 20019 519 inlägg

14 jan. 2011 15:54#13

Ja, för när du kör koden i head så finns inte några input element, då måste göra det i DOM-ready funktionen i jquery i så fall:

<script type="text/javascript">$(function() {$('input[placeholder]').placeholder();});</script>

Fördelarna att lägga det så långt ner på sidan är:
1. sidan laddar snabbare "upplevs snabbare"
2. Du behöver inte vänta på att DOM-ready, då alla element (som inte skapas dynamiskt) redan finns att hämta upp.

silfverMedlem sedan apr. 200312 679 inlägg

14 jan. 2011 15:59#14

Bra svar voigtann1. :)

Dum fråga kanske, men hur kan man se i javascript-strängen att den inte kan köras förrän elementet finns? Koden jag visar i mitt första inlägg kan man ju t.ex. köra i head.

voigtann1Medlem sedan juni 20019 519 inlägg

14 jan. 2011 16:06#15

Om du försöker köra:

$('input[placeholder]')

i head så kommer du få en tom array-collection tillbaka eftersom det inte finns några input fält i koden om du har:

<html>
<head>
<script type="text/javascript">$(function() {$('input[placeholder]').placeholder();});</script>
</head>
...

Du få kolla upp, de ända element som finns skapade när den kommer ner dit är script, head och html, inga andra element.

Om du skall ha koden i head så måste du köra DOM-ready: http://www.learningjquery.com/2006/09/introducing-document-ready

silfverMedlem sedan apr. 200312 679 inlägg

14 jan. 2011 16:09#16

Perfekt länk! Måste sätta mig in mer i grunderna för jquery. Om du har fler länkar på lager så tas de tacksamt emot. :bire

silfverMedlem sedan apr. 200312 679 inlägg

25 jan. 2011 07:50#17

Jag hittade ytterligare en som gör ungefär samma sak antar jag. Jag vet inte hur Andrées fungerar men den jag länkar till här tillåter i alla fall inte tomma fält vilket är bra om man bygger formulär med det här scriptet så vill man ju inte skicka med ett förnamn där det står "Förnamn..." :p

https://github.com/romac/jQuery.placeHoldize

voigtann1Medlem sedan juni 20019 519 inlägg

25 jan. 2011 07:57#18

bara att göra en sökning på html5 placeholder shims så kommer du få rätt många träffar, vet bara att Andrées fungera ;) Då om jag inte är helt ute och cykla så fyller han aldrig in något värde i input fältet utan lägger en label ovanför den.

silfverMedlem sedan apr. 200312 679 inlägg

25 jan. 2011 09:46#19

voigtann1 skrev:

bara att göra en sökning på html5 placeholder shims så kommer du få rätt många träffar, vet bara att Andrées fungera ;) Då om jag inte är helt ute och cykla så fyller han aldrig in något värde i input fältet utan lägger en label ovanför den.

:D Okay. Känns som man är helt ny i den här genren.

Fick dock ta bort alla placeholders då jag kom på att det är rätt dumt att ha en profilsida byggd med såna då man vill veta vad fälten ska innehålla för information om man t.ex. uppdaterar profilen. :p

voigtann1Medlem sedan juni 20019 519 inlägg

25 jan. 2011 10:16#20

silfver skrev:

Fick dock ta bort alla placeholders då jag kom på att det är rätt dumt att ha en profilsida byggd med såna då man vill veta vad fälten ska innehålla för information om man t.ex. uppdaterar profilen. :p

Låter klokt ;)