清除输入，模糊的文本区域，如果字段为空白则默认

Question

我正在尝试清除两个分配了类的输入字段，以及一个在模糊时分配了默认值的类的文本区域，并且仅当该字段退出时该字段为空白时才将其返回为默认值。如果用户包含了他们自己的文本，我要求保留。

这是我目前所拥有的：

$("input, textarea").focus(function() {
this.value = "";
});

$(".namefield").on("blur", function() {
$(this).val("Name");
});

$(".emailfield").on("blur", function() {
$(this).val("Email");
});

$(".messagefield").on("blur", function() {
$(this).val("Message");
});

Answer 1

首先快速说明一下，HTML placeholder 属性将完全按照您的本机描述进行。如果可能的话，我会鼓励将其作为首选。实现将是：

<input type="text" class="namefield" placeholder="Name" />

更多阅读在这里：http://www.w3schools.com/tags/att_input_placeholder.asp

 

如果你不能为元素添加属性，但你已经设置了值，你可以使用 jQuery 动态添加属性。你可以使用我们最初谈到的 jQuery 方法，也可以添加 placeholder 属性。

 
这是两个示例，我还用一个工作示例更新了 JS Fiddle。

使用占位符

$(document).ready(function() {
    $("input, textarea").each(function() {    
        $(this).attr('placeholder',$(this).val());
        $(this).val('');
    })
})

将 data-default 与原始答案结合使用

$(document).ready(function() {
    $("input, textarea").each(function() {    
        $(this).data('default',$(this).val());
    })
})

原答案：

如果您仍然需要使用 jQuery，您可以设置和检查状态并将其与默认值进行比较。这样的事情会起作用：

HTML

<input type="text" class="namefield" data-default="Name" value="Name" />
<input type="text" class="emailfield" data-default="Email" value="Email" />

JavaScript

$(document).ready(function() {
  $("input, textarea").focus(function() {
    if($(this).data('default') == $(this).val()) {
      $(this).val('');
    }
  });


  $("input, textarea").blur(function() {
    if($(this).val() == '') {
      $(this).val($(this).data('default'));
    }
  });
})

你可以在这个 JS Fiddle 中看到它的工作原理：https://jsfiddle.net/77Lk4kep/1/

希望有帮助！