Question

嗨，我有这个输入字段

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

});

但它不起作用。

Answer 1

您无法显示或隐藏字段值，但您可以设置。

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

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

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

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

Answer 2

您可以使用“占位符”

您将在文本字段中显示的占位符属性中提供什么如果您专注于将隐藏的文本字段。如果您专注于将显示占位符值的类型

示例：

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

Answer 3

Demo

新Placeholder attribute将是解决您问题的最佳解决方案，但请注意

Internet Explorer 10支持占位符属性， Firefox，Opera，Chrome和Safari。注意：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");
     }
});

Answer 4

我认为你要的是这个

$('.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"/>

Answer 5

您可以使用纯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/

Answer 6

试试这个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();
    });
});

希望它有所帮助！

Jquery输入字段值切换

6 个答案: