jquery wyczyść domyślną wartość wejściową

Jak mogę wyczyścić domyślną wartość formularza wejściowego przy pomocy jquery i wyczyścić go ponownie po naciśnięciu przycisku przesyłania?jquery wyczyść domyślną wartość wejściową

<html> 
     <form method="" action=""> 
      <input type="text" name="email" value="Email address" class="input" /> 
      <input type="submit" value="Sign Up" class="button" /> 
     </form> 
</html> 

<script> 
$(document).ready(function() { 
    //hide input text 
    $(".input").click(function(){ 
     if ($('.input').attr('value') == ''){ 
      $('.input').attr('value') = 'Email address'; alert('1');} 
     if ($('.input').attr('value') == 'Email address'){ 
      $('.input').attr('value') = ''} 
    }); 
}); 
</script>

Źródło

2012-08-01 viktor

Czy zamiast tego można użyć natywnego atrybutu 'placeholder'? Dostępnych jest wiele [polyfills] (https://github.com/jamesallardice/Placeholders.js), aby działały w starszych przeglądarkach. –

@JamesAllardice Dlaczego nie zamieściłeś tego jako odpowiedzi? Myślę, że jest to najłatwiejsze i najlepsze rozwiązanie. – jelies

@jelies - Nie pisałem tego jako odpowiedzi, ponieważ podczas gdy robi to samo, co OP próbuje zrobić, to tak naprawdę nie odpowiada na to, co jest nie tak z ich kodem. Ale zgadzam się, to zdecydowanie najłatwiejsze rozwiązanie! –

Można to wykorzystać ..

<body> 
    <form method="" action=""> 
     <input type="text" name="email" class="input" /> 
     <input type="submit" value="Sign Up" class="button" /> 
    </form> 
</body> 

<script> 
    $(document).ready(function() { 
     $(".input").val("Email Address"); 
     $(".input").on("focus", function() { 
      $(".input").val(""); 
     }); 
     $(".button").on("click", function(event) { 
      $(".input").val(""); 
     }); 
    }); 
</script>

Mówiąc o swoim własnym kodem, problemem jest to, że api atr jQuery jest ustawiony przez

$('.input').attr('value','Email Adress');

a nie, jak to zrobić:

$('.input').attr('value') = 'Email address';

Źródło

2012-08-01 09:57:25 Kaustubh

Zdecydowałem się użyć tej odpowiedzi, ponieważ wydaje się ona najbardziej elegancka. – viktor

thnx.i sam jestem nowy w jquery.this jest moim pierwszym akceptowanym anserem tutaj i trzecim ogólnie (jak można prawdopodobnie wywnioskować dzięki moim punktom reputacyjnym) – Kaustubh

Dlaczego '$ ('. Input'). RemoveAttr ('value')' nie działa? –

Spróbuj tego:

var defaultEmailNews = "Email address"; 
    $('input[name=email]').focus(function() { 
    if($(this).val() == defaultEmailNews) $(this).val(""); 
    }); 

    $('input[name=email]').focusout(function() { 
    if($(this).val() == "") $(this).val(defaultEmailNews); 
    });

Źródło

2012-08-01 08:10:24 tekilatexee

$('.input').on('focus', function(){ 
    $(this).val(''); 
}); 

$('[type="submit"]').on('click', function(){ 
    $('.input').val(''); 
});

Źródło

2012-08-01 08:11:02 Faust

chyba że naprawdę martwi się o starszej przeglądarce można po prostu użyć nowego HTML5 zastępczy atrybut tak:

<input type="text" name="email" placeholder="Email address" class="input" />

Źródło

2012-08-01 08:12:07

"Jeśli naprawdę nie martwisz się starszą przeglądarką" ... możesz polyfillować atrybut "placeholder", aby działał również w starszych przeglądarkach. Zobacz mój komentarz na pytanie i zobacz [Modernizr wiki] (https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) dla innych przykładów. –

Tak, to prawda, lub możesz po prostu napisać trochę JQuery, aby pobrać atrybut, jeśli jesteś zainteresowany. –

$(document).ready(function() { 
    //... 
//clear on focus 
$('.input').focus(function() { 
    $('.input').val(""); 
}); 
    //clear when submitted 
$('.button').click(function() { 
    $('.input').val(""); 
});

});

Źródło

2012-08-01 08:12:35

To jest złe '$ ('. Input'). Attr ('value') = 'Adres e-mail';', powinno być '$ (" input "). Attr ('value', 'Email address'); "w jaki sposób została wznowiona ta odpowiedź? –

@ToniMichelCaubet Zmieniono odpowiedź, dziękuję. Ten kod i tak nie był związany z pytaniem. Skopiowałem to z kodu w serwisie topicstarter. –

Wystarczy skrótowym

$(document).ready(function() { 
    $(".input").val("Email Address"); 
     $(".input").on("focus click", function(){ 
      $(this).val(""); 
     }); 
    }); 
</script>

Źródło

2015-08-21 19:11:46

jquery wyczyść domyślną wartość wejściową

Odpowiedz

Powiązane problemy