jquery - Html输入在选择时隐藏文本并显示是否将其留空

Question

我正在开发一个表单有一个问题我设置了文本框的值

<input type="text" value="First name" id="TbName">
<input type="text" value="Email" id="TbEmail">
<input type="text" value="School" id="TbSchool">

如果用户选择该框来填充文本并且如果他/她没有在框中输入任何内容并选择另一个框而不是文本框的值将再次显示默认值，我想隐藏该值。我有很多表单和很多字段，所以不可能为每个表单编写单独的代码，还有其他方法吗？

Answer 1

HTML：

 <input type="text" name="fname" placeholder="First name">
  <input type="text" name="lname" placeholder="Last name">

使用placeholder具有价值

Answer 2

您可以使用$.data()执行此操作：

HTML：

<input type="text" value="First name" data-default="First name" id="TbName">
<input type="text" value="Email" data-default="Email" id="TbEmail">
<input type="text" value="School" data-default="School" id="TbSchool">

查询：

$('input:text').each(function(){
    $.data(this, 'default', this.value);
}).focus(function(){
    if ($.data(this, 'default') == this.value) {
        this.value = '';
    }
}).blur(function(){
    if (this.value == '') {
        this.value = $.data(this, 'default');
    }
});

参考现场演示