Question

以下是使用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>

重现的步骤：

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

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

Answer 1

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

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

Answer 2

使用HTML5占位符属性

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

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>

Answer 3

拉斐尔是对的。但是，如果您需要它在足够老的浏览器中工作以至于它们不支持占位符属性，只需切换值属性设置器以使用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>

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

3 个答案: