清除输入，模糊文本区域和默认值(如果字段为空）

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

本文关键字：如果 字段 默认值 输入 模糊 文本 区域 清除      更新时间：2023-09-26

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

这是我到目前为止所拥有的：

$("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");
});

首先快速说明一下，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('');
    })
})

将数据默认值与原始答案结合使用

$(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/

希望对您有所帮助！

相关文章：