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

debugcn 发表于 Dev

用户名

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

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

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

亚当·科涅斯卡（Adam Konieska）

首先快速记一下，HTMLplaceholder属性将完全按照您本机描述的方式进行操作。如果可能的话，我鼓励您将其作为首选。该实现将简单地是：

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

希望对您有所帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。