---
title: "Text i formulär ska försvinna/komma tillbaks"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/185760-text-i-formulär-ska-försvinna-komma-tillbaks"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "silfver"
published: "2011-01-14T11:17:36.000Z"
updated: "2011-01-25T10:16:42.000Z"
replies: 19
views: 3186
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/185760-text-i-formulär-ska-försvinna-komma-tillbaks"
---

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

## #1 — silfver, 2011-01-14T11:17Z

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å? :)

Permalänk: https://www.webforum.nu/p/185760

## #2 — voigtann1, 2011-01-14T11:23Z

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>

Permalänk: https://www.webforum.nu/p/2266273

## #3 — silfver, 2011-01-14T11:36Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1527205)**
>
> 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. :)

Permalänk: https://www.webforum.nu/p/2266277

## #4 — voigtann1, 2011-01-14T11:39Z

> **[silfver skrev:](https://www.webforum.nu/p/1527209)**
>
> 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.

Permalänk: https://www.webforum.nu/p/2266278

## #5 — silfver, 2011-01-14T11:44Z

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.

Permalänk: https://www.webforum.nu/p/2266279

## #6 — voigtann1, 2011-01-14T11:48Z

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.

Permalänk: https://www.webforum.nu/p/2266281

## #7 — silfver, 2011-01-14T12:03Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1527213)**
>
> 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?

Permalänk: https://www.webforum.nu/p/2266282

## #8 — voigtann1, 2011-01-14T12:32Z

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

Permalänk: https://www.webforum.nu/p/2266283

## #9 — silfver, 2011-01-14T12:43Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1527216)**
>
> 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. ;)

Permalänk: https://www.webforum.nu/p/2266285

## #10 — voigtann1, 2011-01-14T12:47Z

Se bild :P

Bilagor:

- [Untitled-1.png](https://www.webforum.nu/a/22356.png)

Permalänk: https://www.webforum.nu/p/2266286

## #11 — silfver, 2011-01-14T14:06Z

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å. :)

Permalänk: https://www.webforum.nu/p/2266289

## #12 — silfver, 2011-01-14T15:50Z

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>
```

Permalänk: https://www.webforum.nu/p/2266301

## #13 — voigtann1, 2011-01-14T15:54Z

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.

Permalänk: https://www.webforum.nu/p/2266303

## #14 — silfver, 2011-01-14T15:59Z

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.

Permalänk: https://www.webforum.nu/p/2266305

## #15 — voigtann1, 2011-01-14T16:06Z

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>

Permalänk: https://www.webforum.nu/p/2266306

## #16 — silfver, 2011-01-14T16:09Z

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

Permalänk: https://www.webforum.nu/p/2266307

## #17 — silfver, 2011-01-25T07:50Z

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>

Permalänk: https://www.webforum.nu/p/2266903

## #18 — voigtann1, 2011-01-25T07:57Z

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.

Permalänk: https://www.webforum.nu/p/2266904

## #19 — silfver, 2011-01-25T09:46Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1527943)**
>
> 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

Permalänk: https://www.webforum.nu/p/2266908

## #20 — voigtann1, 2011-01-25T10:16Z

> **[silfver skrev:](https://www.webforum.nu/p/1527947)**
>
> 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 ;)

Permalänk: https://www.webforum.nu/p/2266909

---

Tråden på webben: https://www.webforum.nu/amne/javascript/185760-text-i-formulär-ska-försvinna-komma-tillbaks