javascript - 如何正确控制或对表单字段的焦点进行占位符操作？

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

我建议你不必担心这个，但要删除焦点上的占位符文本(并恢复 blur 上的 placeholder)我建议如下:

$('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) 对象“突破”回到 native DOM 节点。为避免这样做，只需 this 会更容易:

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

JS Fiddle demo .

引用资料:

• blur() (jQuery) .
• focus() (jQuery) .
• data() (jQuery) .
• focus() (jQuery) .
• removeAttr() (jQuery) .
• removeAttribute() .