jquery - Ændring af udseende på en label - Udvikleren.dk

Tags: jquery html5 css3

Bruger #15663 @ 08.11.11 19:22

Hejsa udviklere.

Jeg har lavet nogle input felter og fået lagt dem ind i mit input felter.

Nu vil jeg gerne have lavet det samme sker som på dette link.
Altså at når der klikkes på feltet så fader skriften lidt ud ikke total, og når der så indtastes noget så forsvinder den tekst der er der total.
Hvis man så sletter det man har indtastet at default teksten kommer tilbage.
Kort sagt, det skal fungere på samme måde som på linket.

I får lige min mark-up af min form pt.

HTML kode

 <!DOCTYPE HTML>
 
 <html>
 <head>
 <title>MNet</title>
 <link rel="stylesheet" type="text/css" href="css/main.css" />
 
 <script type="text/javascript" src="scripts/jquery/source/jquery.js"></script>
 <script type="text/javascript" src="scripts/jquery/main.js"></script>
 </head>
 <body> 
   <div id="content" class="login">
                 
                 <h1><img src="images/icons/lock-closed.png" alt="" />MNet</h1>
                 
                 
                 <div class="notif warning">
                     No password needed just submit the form
                     <a href="#" class="close"></a>
                                 </div>
                 
                                 <form action="login.php" method="post">
 
                 <div class="input placeholder">
                     <label for="login">Brugernavn</label>
                     <input type="text" name="username" id="login"/>
                 </div>
                 <div class="input placeholder">
                     <label for="pass">Adgangskode</label>
 
                     <input type="password" id="pass" value="" name="password"/>
                 </div>
                 <div class="checkbox">
                     <input type="checkbox" id="remember"/>
                     <label class="inline" for="remember">Husk mig</label>
                 </div>
                 <div class="submit">
                     <input type="submit" value="Log Ind" name="submit"/>
 
                 </div>
                 </form>
 
                 
             </div>
 </body>
 </html>

Pt har jeg dette i min main.js

JScript kode

 $(document).ready(function() {
 $(input).click(
         function() {
          $(label).fadeOut('slow');
         }
     );
 });

Håber der er en der kan hjælpe mig videre

7 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 19 karma

Sorter efter stemmer Sorter efter dato

Bruger #16025 @ 08.11.11 19:50

442

Jeg ville mene at du skal sætter din jQuery op således:

JScript kode

 $(document).ready(function() {
     $("input").click(function() {
         $("label").fadeOut('slow');
     });
 });

Eller således:

JScript kode

 $(document).ready(function() {
     $(":input").click(function() {
         $("label").fadeOut('slow');
     });
 });

Er ikke helt sikker på det

Bruger #10216 @ 08.11.11 21:14

4.283

Nedestående kode er skrevet på ren fingergefülen. Dermed sagt, at jeg ikke aner om det virker. Så se det som pseudo kode, der blot mangler lidt tilpasninger.

Men i bund og grund handler jo mest om hvordan jeg nok ville gøre det. Hvis altså jeg fandt på at skrive klumpekode, som jQuery jo gerne opfordrer til...

JScript kode

 $(document).ready(function() {
     $("input").focus(function() { // onFocus: shade the label
         $(this).parent().find('label').anim({opacity:.5},'slow');
     }).blur(function() { // onBlur: give label full color
         var el = $(this).parent().find('label');
         if(!$(this).attr('value').length) {
             el.anim({opacity:1},'slow');
         }
     }).keydown(function() { // onKeyDown: hide label, when input field is not empty
         var el = $(this).parent().find('label');
         el.css({display: $(this).attr('value').length ? 'none' : 'block');
     });
 });

Indlæg senest redigeret d. 08.11.2011 23:15 af Bruger #10216

Bruger #10216 @ 09.11.11 01:11

4.283

Hvis du har brugt to timer på at få det til at virke, og det ikke er sket... har du så brugt nok tid på det?

Bortset fra et en enkelt tegnfejl, og en lille flow fejl. Så virker hele den kode jeg har givet dig som det eksempel du har linket til.

Jeg har brugt mere end to timer på at lære at lære det...

Kode

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSS/JS Forms</title>
		<style>
			div { position: relative; }
			div > label { position: absolute; display: block; left: 5px; top: 5px; font: normal 9pt arial; color: #666; }
			div > input { position: absolute; background: transparent; }
		</style>
	</head>
	<body>
		<div>
			<label>Label</label>
			<input type="text" />
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
			     $("input").focus(function() { // onFocus: shade the label
			         $(this).parent().find('label').animate({opacity:.5},'slow');
			     }).blur(function() { // onBlur: give label full color
			         var el = $(this).parent().find('label');
			         if(!$(this).attr('value').length) {
				     el.css({display:'block'}).animate({opacity:1},'slow');
			         }
			     }).keyup(function() { // onKeyDown: hide label, when input field is not empty
			         var el = $(this).parent().find('label');
			         el.css({display: $(this).attr('value').length ? 'none' : 'block'});
			     });
			 });
		</script>
	</body>
</html>

Indlæg senest redigeret d. 09.11.2011 10:02 af Bruger #10216

Bruger #15663 @ 08.11.11 20:03

415

Okay.

Det første forslag du kom med gjorde det.

Nu skal jeg bare have så de ikke forsvinder helt før der indtastes noget.
Hvordan gør jeg det?

EDIT:
Jeg har ændret fra fadeOut('slow') til fadeTo('slow', 0.5).

Jeg mangler stadig den sidste funktionalitet nemlig den med at label teksten forsvinder når jeg trykker på en tast, og den kommer frem igen hvis jeg fjerne alt det jeg har skrevet, og den bliver ændret til opacity 1.0 hvis der klikkes uden for input feltet.
Jeg vil også gerne have lavet så det kun er det ene input felt der bliver påvirket af gangen

Indlæg senest redigeret d. 08.11.2011 20:13 af Bruger #15663

Bruger #16025 @ 08.11.11 20:14

442

Du sætter vel bare opacity til 0 (nul) idet at der er kommet ny tekst i feltet

Bruger #15663 @ 09.11.11 00:42

415

Hej Michael.

Nu er det ikke lige i jquery at min stærke side er, så at skulle få den til at virke, tror jeg ikke jeg kan... Nu har jeg prøvet i 2 timer og kan ikke få det til at virke.

Det jeg mangler er at de default værdier som står i label ikke kommer frem hvis der er indtastet noget i input feltet.

Dette er hvad jeg har indtil videre:

JScript kode

 $("input").focus(function() {
          $(this).parent().find("label").fadeTo("slow", 0.5);
     }).blur(function() {
          $("label").fadeTo("slow", 1.0);
     }).keydown(function() {
          $(this).parent().find('label').hide();
     });

Bruger #15663 @ 09.11.11 11:41

415

Hej Michael.

Jeg kan godt forstå du forstår det på den måde.

jeg mener sådan set at jeg havde brugt to timer på det før jeg skrev på udvikleren, også brugte jeg to timer på at få din kode til at virke.
Men før dette har jeg nok kigget på det i en uges tid.
Jeg var sådan set ved at få grå hår af det.

Men som nævnt tidligere så er jeg ikke en haj til jquery endnu.

Men jeg har lavet en ctrl+c på din kode og fået den til at virke i mit projekt.

Jeg takker for denne fremragende hjælp jeg har fået i denne sag.

Ændring af udseende på en label

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler