Question

我正在尝试模仿Twitter在其主页上使用的效果。它在两个登录字段中显示“用户名”和“密码”，然后当您开始键入时，它将删除文本。到目前为止，我还没有成功，我最好的尝试是在密码字段中显示文本，但显示它就像输入了密码一样。

是否有可用的JQuery插件？我见过一个需要两个密码字段的地方，一次只显示一个。这不合适。

Answer 1

我们发现最好的jQuery插件是jQuery Placeholder Plugin（a.k.a. jquery.placeholder.js）。出于与其宣传的功能相同的原因，它是最好的：

适用于所有A级浏览器，包括IE6。

自动检查浏览器是否原生支持placeholder和input元素的HTML5 textarea属性。如果是这种情况，插件将不会执行任何操作。如果仅@placeholder元素支持input，则插件将保留这些元素并专门应用于textarea。（Safari 4，Opera 11.00以及其他浏览器可能就是这种情况。）

在jQuery.fn.placeholder.input和jQuery.fn.placeholder.textarea中缓存其两项功能测试的结果。例如，如果@placeholder元素原生支持input，则jQuery.fn.placeholder.input将为true。加载插件后，您可以在自己的代码中重复使用这些属性。

确保它永远不会在您的DOM中导致重复ID，即使在需要额外input元素来伪造@placeholder密码输入的浏览器中也是如此。这意味着您可以安全地执行以下操作：

Answer 2

你可以使用jquery水印插件：

http://code.google.com/p/jquery-watermark/

Answer 3

我使用this plugin

Answer 4

    <script>
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    </script>

使用JQuery在密码字段中显示占位符文本，然后在输入文本时将其删除

4 个答案: