77

jqueryを使用して入力フォームonfocusのデフォルト値をクリアし、送信ボタンが押されたときに再度クリアするにはどうすればよいですか？

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

6 に答える 6

131

あなたはこれを使うかもしれません..

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

あなた自身のコードについて言えば、問題はjqueryの属性APIが

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

あなたがしたようではありません：

$('.input').attr('value') = 'Email address';
于 2012-08-01T09:57:25.750 に答える
18 
$(document).ready(function() {
  //...
//clear on focus
$('.input').focus(function() {
    $('.input').val("");
});
   //clear when submitted
$('.button').click(function() {
    $('.input').val("");
});

}）;

于 2012-08-01T08:12:35.350 に答える
8 
$('.input').on('focus', function(){
    $(this).val('');
});

$('[type="submit"]').on('click', function(){
    $('.input').val('');
});
于 2012-08-01T08:11:02.703 に答える
8

古いブラウザについて本当に心配していない限り、次のplaceholderように新しいhtml5属性を使用できます。

<input type="text" name="email" placeholder="Email address" class="input" />
于 2012-08-01T08:12:07.737 に答える
3

それを試してください：

  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);
  });
于 2012-08-01T08:10:24.463 に答える
2

ただの略記

$(document).ready(function() {
    $(".input").val("Email Address");
        $(".input").on("focus click", function(){
            $(this).val("");
        });
    });
</script>
于 2015-08-21T19:11:46.837 に答える