jQuery清除输入默认值

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>

jquery

— 维克多
source

9

您可以改用nativeplaceholder属性吗？有多种方法可以使它在较旧的浏览器中运行。

— James Allardice

@JamesAllardice为什么不将其发布为答案？我认为这是最简单，最好的解决方案。

— jelies 2012年

1

@jelies-我没有将其发布为答案，因为尽管它执行与OP尝试执行的操作相同的功能，但实际上并不能真正回答其代码出了什么问题。但我同意，这绝对是最简单的解决方案！

— 詹姆斯·阿拉迪斯

是的，这是一个很好的答案，我已对其进行了投票，但我不想使用占位符标签。

— 维克多

126

您可以使用此。

<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的attr api是通过设置的

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

而不是像您所做的那样：

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

— 考斯图
source

我决定使用此答案，因为它似乎是最优雅的。

— 维克多

1

thnx.i本人是jquery的新手。这是我在这里获得的第1个分析器，并且是整体上第3个（因为您可以根据我的声望点来推断）

— Kaustubh 2012年

为什么$('.input').removeAttr('value')不起作用？

— Almino Melo 2015年

16

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

}）;

— 萨沙
source

这是错误的$('.input').attr('value') = 'Email address';，应该$('.input').attr('value', 'Email address');如何回答这个答案？

— 托尼·米歇尔·考贝特

1

@ToniMichelCaubet编辑了答案，谢谢。该代码与问题无关。我从topicstarter的代码复制了它。

— 萨沙（Sasha）2015年

8

除非您真的担心较旧的浏览器，否则可以placeholder像下面这样使用新的html5属性：

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

— DJ Forth
source

2

“除非您真的担心较旧的浏览器”，否则您可以填充该placeholder属性，以便它也可以在较旧的浏览器中使用。请参阅我对该问题的评论，以及有关其他示例的Modernizr Wiki。

— 詹姆斯·阿拉迪斯

是的，是的，或者如果您愿意的话，您可以编写一些JQuery来自己提取属性。

— DJ 2012年

7

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

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

— 浮士德
source

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);
  });

— tekilatexee
source

2

只是简写

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

— 托尼·米歇尔·考贝特
source