如果使用 jquery 值为空，则无法为占位符设置值属性

Unable to set value attribute for placeholder if value is empty using jquery

本文关键字：占位符 属性 设置 jquery 如果      更新时间：2023-09-26

下面是一个使用 jquery 的带有脚本标记的示例 HTML 代码：

<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var email_def= "Enter email address";
        $('input[type="email"]').attr('value', email_def).focus(function() {
            if ($(this).val() == email_def) {
                $(this).attr('value', '');
            }
        }).blur(function() {
            var val = $(this).val();
            if (val == '') {
                $(this).attr('value', email_def);
                alert(val);
                alert(email_def);
            }
        });
    });
</script>
</head>
<body>
    <form>
        Email: <input type="email"> <input type="submit" id="submit">
    </form>
</body>
</html>

重现步骤：

  1. 在输入框中单击。占位符值已清除。单击外部，占位符值现在重置回来。
  2. 在输入框中单击。键入一些文本。删除文本。在外面点击。占位符值不会重置回来。将触发警报。甚至email_def也处于警报状态。现在，属性值不会重置为 email_def 值。我的问题是为什么没有在模糊函数中调用该行$(this).attr('value', email_def);。

编辑：感谢您的回答。html5 的占位符以及替换为 $(this).val(); 行似乎都可以正常工作

与其考虑$(this).attr('value', email_def);，不如考虑$(this).val(email_def);。它将按照您指定的方式运行。

Rafael建议使用HTML的placeholder是正确的，除非你对Internet Explorer有一些特定的需求。

使用 HTML5 占位符属性

向用户提示可以在控件中输入的内容。这 占位符文本不得包含回车符或换行符。这 属性在类型属性的值为文本时适用， 搜索、电话、网址或电子邮件;否则将被忽略。

http://jsfiddle.net/xj7v8gd7/

<form action="<some action>">
  <input type="email" id="emailForm" size="30" placeholder="Enter email address"><br>
  <input type="submit" value="Submit">
</form>

拉斐尔是正确的。但是，如果您需要它在足够旧的浏览器中工作，以至于它们不支持占位符属性，只需切换您的值属性设置器以使用 val（） 上的重载即可。所以：

$(this).val('Enter the email address') //for example

请参阅下面演示的内容（看起来只有模糊方法中的那个实际上是一个问题。

    $(document).ready(function() {
      var email_def = "Enter email address...";
      $('input[type="email"]').attr('value', email_def).focus(function() {
        //alert('focus');
        if ($(this).val() === email_def) {
          $(this).val('');
        }
      }).blur(function() {
        if ($(this).val() === '') {
          $(this).val(email_def);
        }
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
  Email:
  <input type="email" id="emailForm" size="30" />
  <input type="submit" id="submitForm" />
</form>

相关文章：