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

Question

我正在尝试清除两个分配了 classes 的输入字段，以及一个分配了 class 模糊默认值的文本区域，并且 return 只有在以下情况下才将其设置为默认值退出该字段时该字段为空白。如果用户包含了他们自己的文本，我要求保留。

这是我目前所拥有的：

$("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 中工作 Fiddle: https://jsfiddle.net/77Lk4kep/1/

希望对您有所帮助！

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

Clear input, textarea on blur and default if field is blank

javascript

textarea

focus

input

blur