jquery - 如何使用输入时消失的提示文本预填充输入文本字段(jQuery)

Question

当您点击 Stack Overflow 上的“提问” 按钮时，问题标题部分会预先填充浅灰色文本，内容为

"what's your programming question? be specific"

然后，当您在“标题”字段内单击并开始输入时，该文本就会消失。

我想在我的应用程序中做同样的事情。

jQuery 有什么技巧可以实现这一点吗？

具体来说，当有人开始输入时，如何将占位符文本的文本颜色从浅灰色更改为默认文本颜色？

Answer 1

实现这一点的最简单方法是使用 html(尽管是 html5)的 placeholder 属性:

<input type="text" placeholder="Enter email address." name="email" />

它将显示为“浅色”文本，当用户开始输入内容时该文本就会消失。

但是，如果您确实想要/需要使用 jQuery(因为上述 html 解决方案仅在更现代/兼容的浏览器中可用)，这里有一个方法:

$(document).ready(
    function(){
        $('input:text').each(
            function(){
                $(this).click(
                    function(){
                        $(this).val('');
                    });
                $(this).blur(
                    function(){
                        if ($(this).val == '') {
                            $(this).val($(this).attr('placeholder'));
                        }
                    });
            });
    });

<小时/> 编辑以在最终的 if中添加缺少的 )，并添加上述内容的稍微修改后的版本，其特征是稍微变灰 占位符文本(正如我假设OP希望的那样，考虑到下面评论中的问题):

$(document).ready(
    function(){
        $('input:text').each(
            function(){
                $(this)
                    .val($(this).attr('placeholder'))
                    .css('color','#999');
                $(this).click(
                    function(){
                        $(this)
                            .val('')
                            .css('color','#000');
                    });
                $(this).blur(
                    function(){
                        if ($(this).val() === ''){
                            $(this)
                                .val($(this).attr('placeholder'))
                                .css('color','#999');
                        }
                    });
            });
    });

JS Fiddle demo .