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

pstidsen Novice

04. december 2013 - 11:53 Der er 30 kommentarer og
1 løsning

Et lille default value script

Er der nogen, der har lyst til at lave et lille script, som kan give en default value til alle inputfelter med et specifikt name. Valuen skal selvfølgelig forsvinde når brugeren vil skrive i feltet og komme igen, hvis brugeren ikke skriver noget alligevel.

Synes godt om

keysersoze Ekspert

04. december 2013 - 12:00 #1

nogen specielt grund til at du ikke bare benytter placeholder-attributten?

Synes godt om

pstidsen Novice

04. december 2013 - 12:18 #2

Tjaa tjoo.. IE9 og tidligere understøtter det ikke. Jeg burde måske bruge begge dele? Så jeg både understøtter dem, der ikke har JS aktiveret og dem, der har en gammel browser. Hvis man har en gammel browser med JS deaktiveret, så er man selv ude om det...!

Derudover er det et plugin (Gravity Forms) i WordPress som genererer inputfeltene, så et script lige til at putte i header.php, ville være nemmere at implementere.

Synes godt om

keysersoze Ekspert

04. december 2013 - 20:50 #3

Du kan lave fallback a la dette; http://www.scriptiny.com/2012/08/html5-placeholder-fallback-using-jquery/ - og hvis du ikke kan/vil benytte placeholder kan du bare fjerne den første if og tilpasse selectoren.

Synes godt om

HBP2 Praktikant

04. december 2013 - 21:02 #4

I jQuery burde dette måske virke (har ikke afprøvet det):

var defaultvalue = 'Skrive noget her';
$('input[name=fieldname]').val(defaultvalue).focus(function() {
if ($this).attr('mystate') != 'dontreset')
$(this).attr('mystate', 'reset');
}).blur(function() {
// sæt værdien tilbage til default hvis der ikke er indtastet noget
if ($(this).attr('mystate') == 'reset')
$(this).val(defaultvalue);
}).keydown(function() {
// tastetryk, sæt status så blur() ikke sætter værdien tilbage
$(this).attr('mystate', 'dontreset');
});

Synes godt om

pstidsen Novice

05. december 2013 - 10:00 #5

#3: Scriptet skal selv kunne indsætte placeholder attributten. Jeg har ikke mulighed for selv at tilføje den i HTML

#4: Jeg kan ikke rigtig få det til at virke..

Synes godt om

keysersoze Ekspert

05. december 2013 - 15:38 #6

Så behold if-sætningen og er den ikke opfyldt bruger du attr til at tilføje placeholder.

Synes godt om

pstidsen Novice

05. december 2013 - 15:49 #7

#6: Altså gør scriptet det selv nu eller skal jeg selv skrive det? For det kan jeg ikke. Jeg kan ikke JS og kender ikke syntaksen..

Synes godt om

keysersoze Ekspert

05. december 2013 - 16:09 #8

Nej - det gør det ikke.

http://api.jquery.com/attr/ - fx $('dinselector').attr('placeholder', 'din tekst');

Synes godt om

pstidsen Novice

05. december 2013 - 16:12 #9

Jeg ville blive meget glad, hvis du ville sætte det ind i det eksisterende script, så det lige er til at smide ind i min HTML.

Synes godt om

keysersoze Ekspert

05. december 2013 - 16:45 #10

Jeg vil meget gerne hjælpe folk - det er blandt andet derfor jeg er har på eksperten - men at give en løsning uden der er gjort bare en lille indsats og man har forsøgt sig selv er jeg ikke interesseret i.

Synes godt om

pstidsen Novice

05. december 2013 - 17:15 #11

#10: Men når man snakker om kodning er der heller ikke meget ved at gætte hvor en linje skal sættes ind...

Synes godt om

keysersoze Ekspert

05. december 2013 - 18:53 #12

Har du prøvet at debugge og se hvad scriptet gør eller ikke gør i forskellige browsere? Hvis, så ville du med stor sandsynlighed let kunne se det -det er selvfølgelig ikke ensbetydende med at du så også kan løse det, men så kan du vende tilbage med dit forsøg så vi kan se hvad der er gået galt.

Hvis du afprøvede scriptet (mere eller mindre) uden modificeringer ville du også kunne se om scriptet i det hele taget opførte sig som forventet - gør det ikke det er der jo ingen grund til at forsøge at bygge videre på det.

Synes godt om

pstidsen Novice

05. december 2013 - 19:56 #13

Ok, hvis jeg debugger starter den med at skrive "Unhandled Error: Undefined variable: $" til linje 1. Hvad gør jeg ved det?

Synes godt om

keysersoze Ekspert

05. december 2013 - 23:15 #14

$ er som oftest en henvisning til et framework - i dette tilfælde jQuery, så inkluder det i dit projekt.

Synes godt om

pstidsen Novice

06. december 2013 - 09:55 #15

#14: keysersoze; som sagt kan jeg INTET jQuery, så det giver ingen mening det du skriver..

Synes godt om

keysersoze Ekspert

06. december 2013 - 10:04 #16

Og du har ikke lyst til at gøre bare en lille indsats? Hvad er det du ikke kan - kan du ikke inkludere jQuery eller?

Synes godt om

pstidsen Novice

06. december 2013 - 10:12 #17

Nu har jeg downloadet "Download the compressed, production jQuery 1.10.2" herfra http://jquery.com/download/ og skrevet

over det eksisterende script.

Synes ikke det ændrer noget..

Synes godt om

keysersoze Ekspert

06. december 2013 - 10:16 #18

Hvis fejlen er den samme er referencen forkert - er det ikke den samme må du fortælle hvad det så er eller komme med et link.

Synes godt om

pstidsen Novice

06. december 2013 - 10:24 #19

Du kan se det her: http://webintas.dk/jstest/ Synes ikke debugger giver noget brugbart..

Synes godt om

keysersoze Ekspert

06. december 2013 - 10:34 #20

Det er fordi der ikke er fejl nu - så nu kan du teste om scriptet fungerer bare lidt som forventet. Er du i tvivl om hvad variabler er eller hvor langt scriptet egentlig når kan du vha fx console.log('var'); udskrive værdier til din developer toolbars console.

Synes godt om

pstidsen Novice

06. december 2013 - 10:52 #21

#20: Igen er det volapyk.. Jeg aner ikke hvordan jeg skal gøre og gribe det der an..

Synes godt om

keysersoze Ekspert

06. december 2013 - 11:17 #22

$(document).ready(function() {
console.log('når vi hertil?')
if ( !("placeholder" in document.createElement("input")) ) {
console.log('mon vi når hertil?')
..
}
}

Synes godt om

pstidsen Novice

06. december 2013 - 11:38 #23

Nu har jeg indsat det med fed. Jeg synes konsollen giver forskellige resultater i forskellige browsere. Hvad ser du?

<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log('når vi hertil?')
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {

this.value = val;
}
})
});

// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
});
</script>
</head>

Synes godt om

pstidsen Novice

06. december 2013 - 20:02 #24

UPDATE! Jeg har netop fundet ud af at en placeholder attribut ødelægger resten af funktionen. Derfor skal jeg bruge en 100% jQuery løsning. Jquery skal sætte en default value på alle input med class'en "ginput_quantity".

Synes godt om

pstidsen Novice

06. december 2013 - 22:09 #25

Jeg har fundet denne kodestump:

onblur="if (this.value == '') {this.value = '0';}" onfocus="if (this.value == '0') {this.value = '';}"

som virker som den skal når jeg sætter det som attributter til et inputfelt. Problemet er dog at jeg vil gøre det i et script, hvor den tilføjer attributterne til alle med name="ja". Derudover skal jeg også have tilføjet en value til alle med name="ja". Har fundet

document.getElementByName('test').value = '0';

, men den kan jeg ikke få til at virke.

Synes godt om

pstidsen Novice

08. december 2013 - 11:52 #26

Min kode ser nu sådan her ud:

<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$('.ginput_quantity').val(0);

$(document).on('blur','.ginput_quantity',function(){
if (this.value == '') {this.value = '0';}
})

$(document).on('focus','.ginput_quantity',function(){
if (this.value == '0') {this.value = '';}
})
</script>
</head>
<body>
<input type="text" class="ginput_quantity">
<input type="text" class="ginput_quantity">
<input type="text" class="ginput_quantity">
<input type="text" class="ginput_quantity">
<input type="text" class="ginput_quantity">
</body>
</html>

(link: http://webintas.dk/jstest)

Men det fungerer ikke.. Det burde det da..

Synes godt om

keysersoze Ekspert

08. december 2013 - 12:30 #27

Det ser ud til at virke hos mig - hvad sker/sker ikke hos dig og i hvilken browser?

Hvis det skal være ren jQuery i stedet for at du blander jQuery og klassisk javascipt sammen skal det nok nærmere se sådan ud;

$(document).on('focus','.ginput_quantity',function(){
if ($(this).val() == '0') {$(this).val('');}
})

Fordelen ved at holde det i ren jQuery er at du (stort set) slipper for at tænke på crossbrowser.

Synes godt om

pstidsen Novice

08. december 2013 - 12:49 #28

Ja, det er virkede udover det med at sætte value til 0, men det blev løst ved at sætte det ind i en ready funktion, så scriptet ser sådan her ud:

Du smider bare et Svar og tak for hjælpen og tålmodigheden *D

Synes godt om

keysersoze Ekspert

08. december 2013 - 18:16 #29

eller du kunne flytte det nederst på siden - når det ligger i toppen som nu eksisterer elementer ikke da de jo først dannes længere nede i koden og det er det ready løser for dig. At benytte ready er dog den rigtige løsning - men man ville normalt stadig lægge det nederst for hurtigst muligt at give en respons til brugeren.

Og selvtak for tålmodigheden - nu kan du jo selv snart kalde dig javascript-haj ;)

Synes godt om

pstidsen Novice

08. december 2013 - 18:33 #30

Jeg synes ellers bare altid man har hørt at JS hører til i <head></head>, men det er måske ikke helt rigtigt ?

Synes godt om

keysersoze Ekspert

08. december 2013 - 21:29 #31

Så er det ved at være nogle år siden du har hørt efter ;) nej, til dit eksempel er det fint at placere i head, men inkludering af filer vil man altid placere i bunden.

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
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00

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