Avatar billede 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.
Avatar billede keysersoze Guru
04. december 2013 - 12:00 #1
nogen specielt grund til at du ikke bare benytter placeholder-attributten?
Avatar billede 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.
Avatar billede keysersoze Guru
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.
Avatar billede 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');
});
Avatar billede 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..
Avatar billede keysersoze Guru
05. december 2013 - 15:38 #6
Så behold if-sætningen og er den ikke opfyldt bruger du attr til at tilføje placeholder.
Avatar billede 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..
Avatar billede keysersoze Guru
05. december 2013 - 16:09 #8
Nej - det gør det ikke.

http://api.jquery.com/attr/ - fx $('dinselector').attr('placeholder', 'din tekst');
Avatar billede 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.
Avatar billede keysersoze Guru
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.
Avatar billede 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...
Avatar billede keysersoze Guru
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.
Avatar billede 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?
Avatar billede keysersoze Guru
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.
Avatar billede pstidsen Novice
06. december 2013 - 09:55 #15
#14: keysersoze; som sagt kan jeg INTET jQuery, så det giver ingen mening det du skriver..
Avatar billede keysersoze Guru
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?
Avatar billede 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
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
over det eksisterende script.

Synes ikke det ændrer noget..
Avatar billede keysersoze Guru
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.
Avatar billede pstidsen Novice
06. december 2013 - 10:24 #19
Du kan se det her: http://webintas.dk/jstest/ Synes ikke debugger giver noget brugbart..
Avatar billede keysersoze Guru
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.
Avatar billede 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..
Avatar billede keysersoze Guru
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?')
    ..
  }
}
Avatar billede 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>
Avatar billede 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".
Avatar billede 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.
Avatar billede 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..
Avatar billede keysersoze Guru
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.
Avatar billede 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:
<script>
$(document).ready(function(){
$('.ginput_quantity').val(0);

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

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


Du smider bare et Svar og tak for hjælpen og tålmodigheden *D
Avatar billede keysersoze Guru
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 ;)
Avatar billede 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 ?
Avatar billede keysersoze Guru
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.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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