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

【问题标题】：Unable to set value attribute for placeholder if value is empty using jquery如果使用 jquery 的值为空，则无法为占位符设置值属性
【发布时间】：2017-04-29 02:26:03
【问题描述】：

以下是使用 jquery 的带有 script 标签的示例 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>

重现步骤：

点击输入框。占位符值被清除。点击外部，占位符值现在被重置。
点击输入框。键入一些文本。删除文本。点击外面。占位符值不会重置。警报被触发。甚至 email_def 也显示在警报中。现在，属性值不会重置为 email_def 的值。我的问题是为什么在 blur 函数中没有调用 $(this).attr('value', email_def); 行。

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

【问题讨论】：

为什么不直接使用输入占位符？

标签： javascript jquery html

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用 HTML5 占位符属性

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

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>

【讨论】：

如果您只处理现代浏览器，这是 IMO 的正确答案。 IE9 及以下不支持占位符。不过，您总是可以为此功能添加一个 polyfill。以下是支持它的浏览器：http://caniuse.com/#feat=input-placeholder

【解决方案3】：

拉斐尔是正确的。但是，如果您需要它在足够老的浏览器中工作，以至于它们不支持 placeholder 属性，只需切换您的 value 属性设置器以使用 val() 上的重载。所以：

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

请看下面的演示（看起来只有 blur 方法中的一个实际上是一个问题。

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

【讨论】：