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

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方法，也可以仅添加占位符属性。

这是两个示例，我还用一个有效的示例更新了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小提琴中看到它的工作原理： https : //jsfiddle.net/77Lk4kep/1/

希望有帮助！