Question

我有一个包含3个字段的注册表单：

用户名

电子邮件

密码

在大多数浏览器上，当用户点击某个特定字段时，显示的占位符值将被清空，以便用户可以键入，如果他们没有输入任何内容并从字段中删除占位符文本，则会重新显示。无论如何一些浏览器， chrome不会隐藏占位符文本onfocus所以我不得不写一些javascript来处理这个问题。

我对javascript很新，但对我来说，我为处理这个问题编写的代码似乎并不正确。我觉得它可能更短更好。

对于每个字段，我在文档就绪函数中有这个：

$("#field_id").focusin(function() {
  $(this)[0].placeholder = "";
});
$("#field_id").focusout(function() {
  $(this)[0].placeholder = "Enter email";
});

我的HTML：

<p><input class="signupFields" data-validate="true" id="user_username" name="user[username]" placeholder="Username" size="30" type="text" /></p>
 <p><input class="signupFields" data-validate="true" id="user_email" name="user[email]" placeholder="Email" size="30" type="text" /> </p>
<p><input class="signupFields" data-validate="true" id="user_password" name="user[password]" placeholder="Password" size="30" type="password" /> </p>

所以想象那个时代3 ..似乎有很多代码可以满足这么简单的要求。另外，我真的不喜欢我试图模仿javascripts document.getElementById的事实。必须有一种方法可以用更简洁的jQuery方式做到这一点。不喜欢[0]。

任何人都可以给我一个更清洁的方法来做同样的事情吗？

亲切的问候

Answer 1

我建议您不必担心这一点，但要删除焦点上的占位符文本（并恢复placeholder上的blur），我建议如下：

$('input').focus(
    function(){
        $(this).data('placeholder',this.placeholder).removeAttr('placeholder');
    }).blur(
        function(){
            $(this).attr('placeholder',$(this).data('placeholder')).data('placeholder','');
        });

JS Fiddle demo

使用$(this)[0]表示法的唯一原因是从jQuery-fied $(this)对象“中断”回原生DOM节点。为避免这样做，只需this：

就更容易了

$('input').focus(
    function(){
        this.dataPlaceholder = this.placeholder;
        this.removeAttribute('placeholder');
    }).blur(
        function(){
            this.placeholder = this.dataPlaceholder;
            this.removeAttribute('dataPlaceholder');
        });

JS Fiddle demo

参考文献：

Answer 2

假设您的html如下：

<input id="username" type="text" placeholder="username"/>
<input id="email" type="text" placeholder="email"/>
<input id="password" type="text" placeholder="password"/>

你的JS可能是：

$("input").focusin(function() {
  $(this).data('placeholder',this.placeholder);//store the current placeholder
  this.placeholder = "";//no need for $(this)[0]
}).focusout(function() {
  this.placeholder = $(this).data('placeholder');//retrieve the stored placeholder
});

这将仅使用一位代码来锁定所有这些代码。

以下是演示：http://jsfiddle.net/JKirchartz/SGZNQ/

如何在表单字段的焦点上正确控制或执行占位符操作？

2 个答案: