jquery清除输入默认值

vik*_*tor 69 jquery

如何使用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>
Run Code Online (Sandbox Code Playgroud)

小智 112

你可以用这个..

<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>
Run Code Online (Sandbox Code Playgroud)

谈到你自己的代码,问题是jquery的attr api是由set设置的

$('.input').attr('value','Email Adress');
Run Code Online (Sandbox Code Playgroud)

而不是你做的:

$('.input').attr('value') = 'Email address';
Run Code Online (Sandbox Code Playgroud)


Sas*_*sha 14

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

});


DJ *_*rth 8

除非你真的担心旧的浏览器,否则你可以placeholder像这样使用新的html5 属性:

<input type="text" name="email" placeholder="Email address" class="input" />
Run Code Online (Sandbox Code Playgroud)

  • "除非你真的担心旧的浏览器"......你可以填充`placeholder`属性,所以它也适用于旧的浏览器.请参阅我对该问题的评论,并参阅[Modernizr wiki](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)了解其他示例. (2认同)

Fau*_*ust 5

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

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