0

嗨，我有这个输入字段

<form action="" method="post">
    <input type="text" value="Type Your Email" name="field" class="field"/>
    <input type="submit" value="Submit" class="submit" />
</form>

当我单击该字段时，我试图显示/隐藏该值。问题是我忘记了如何达到我尝试过的价值

$('.field').click(function(){

  $('.field value').toggle();

});

但它不起作用。

4

6 回答 6

3

您不能显示或隐藏字段值，但可以设置它。

你可能正在寻找这样的东西：

$('.field').focus(function(){
   if($(this).val() == 'Type Your Email') {
      $(this).val('');
   }
}).blur(function() {
   if($(this).val() == '') {
      $(this).val('Type Your Email');
   }
});

上面，该值是设置在focus而blur不是在单击该字段时设置的，因此当您通过制表符或其他方式访问该字段时，代码仍然有效。

但是，我更愿意提请您注意 html5 属性placeholder，它确实可以做到这一点，但没有一些不良副作用（例如value，您的字段永远不会是占位符文本）。

于 2013-04-02T12:51:46.390 回答
1

您可以使用“占位符”

您将在占位符属性中给出的内容将显示在文本字段中如果您将注意力集中在将隐藏的文本字段中。如果您将注意力集中在将显示占位符值的 out 类型

例子：

<form action="post">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>
于 2013-04-02T12:57:24.903 回答
0

你可以使用纯JS

<input type="text" value="Type Your Email" onfocus="this.value=''" onblur="this.value='Type..'"     name="field" class="field"/>

或者

$(".field").focus(function (){ $(this).val='';});
$(".field").blur(function (){ $(this).val='Type something';});

在进行更改之前检查输入是否有价值是一个好习惯，而不是清除用户在字段中输入的内容。

您可以在 http://api.jquery.com/focus/ 和 http://api.jquery.com/blur/上找到更多信息

于 2013-04-02T12:58:21.750 回答
0

我想你要的是这个

$('.field').on("focus", function () {
    var txt = $(this);
    if (txt.val() == "Type Your Email")
        txt.val("");
});

$('.field').on("blur", function () {
    var txt = $(this);
    if (txt.val() == "")
      txt.val("Type Your Email");
});

或者你可以使用Placeholder属性（但它不适用于 IE）

<input type="text" value="Type Your Email" 
       name="field" class="field" 
       placeholder="Type Your Email"/>
于 2013-04-02T12:54:57.797 回答
0

试试这个http://jsfiddle.net/zander_pope/udu5cchh/

$(function () {
    $('.button').on('click', function (e) {
        if (!$('.dd').val()) {
            $('.dd').val("relevance");
        } else {
            $('.dd').val("");
        }
    });
});
$(function () {
    $('.button').on('click', function (e) {
        $('.search').click();
    });
});

希望能帮助到你！

于 2014-08-27T12:11:55.480 回答
0

演示

新的占位符属性将是您问题的最佳解决方案，但请注意

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 placeholder 属性。注意：Internet Explorer 9 及更早版本不支持标记的占位符属性。

$('.field').on('focus',function(){

 if($(this).val() == 'Type Your Email') {
      $(this).val('');
   }

});

$('.field').on('blur',function(){
    if($(this).val() == ""){
     $(this).val("Type Your Email");
     }
});
于 2013-04-02T12:53:28.467 回答