如何使用 jQuery 在输入元素上实现占位符文本？答案

【问题标题】：How to implement placeholder text on input elements using jQuery?如何使用 jQuery 在输入元素上实现占位符文本？
【发布时间】：2011-03-15 00:28:05
【问题描述】：

如何在输入上实现 jquery 提示文本？

<input class="question_box" title="hint text">

谢谢 :))

【问题讨论】：

该文本告诉用户文本框在模糊时是关于什么的，但在焦点上文本被删除！
我相信这叫做占位符文本。

标签： javascript jquery text

【解决方案1】：

HTML5 在文本框上引入了placeholder 属性。在这里阅读：http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-placeholder

现场演示： http://jsfiddle.net/simevidas/8mTLY/

目前适用于 Chrome、Safari 和 Opera。
Firefox 4 应该添加对此的支持（请确认）。
不幸的是，IE9 似乎没有实现这一点。

【讨论】：

【解决方案2】：

“jquery hint text”的第一个 Google 搜索结果是 this plugin，这与您想要的一样。

$('.question_box').hint();

【讨论】：

我正在寻找关于输入而不是工具提示的提示文本！ :)
@pingpong：那么您应该编辑您的问题以阐明您实际在寻找什么。
Remy 的脚本很棒，但您需要添加 $input.attr('value') !== undefined) 才能在 IE7 中使用模糊效果。

【解决方案3】：

编辑：好的，我不明白“提示文本”，抱歉。

$(function() {
    $('.question_box').focus(function() {
        if ($(this).val() == 'Blablabla')
            $(this).val('');
    });

    $('.question_box').blur(function() {
        if($(this).val() == '')
            $(this).val('Blablabla');
    });

}

【讨论】：

'好的，我不明白“提示文本”，抱歉。'没有人... ;)

【解决方案4】：

jquery autocomplete怎么样？

【讨论】：

【解决方案5】：

使用 jQuery 1.5.1 和 jQuery UI 1.8.9，以及来自 jQ UI 1.9 的工具提示代码： http://jsfiddle.net/JAAulde/XpbGh/1/

编辑： 似乎在我发帖时，您添加了有关您想要的信息的信息，但事实并非如此。

【讨论】：

【解决方案6】：

这是我在项目中用于实现帮助文本或占位符的函数。我希望有人会发现它有用。

 $(' #chkbx_presentkort').on('change', function() {
     if($('#chkbx_presentkort').is(':checked')) {

         $('.lagerstatus #kortet_text').show().val('Skriv din text på kortet').css("color","#666");
         console.log("checked");
         $('.lagerstatus #kortet_text').focusin(function() {
             if($('.lagerstatus #kortet_text').val()== 'Skriv din text på kortet') {
             $('.lagerstatus #kortet_text').val('');
             }
         });
         $('.lagerstatus #kortet_text').focusout(function() {
             if($('.lagerstatus #kortet_text').val() == '') {
             $('.lagerstatus #kortet_text').val('Skriv din text på kortet').css("color","#666");
             }
         });
     }
     else  {
     $('.lagerstatus #kortet_text').hide();
     }
 });

【讨论】：

【解决方案7】：

有一个类似的名为 inputHints 的 jQuery 插件。对于尚不支持的浏览器，我将占位符属性与 javascript 结合使用。

语法与前面提到的插件非常相似，但这个插件可以在 github 上找到，所以每个人都可以免费提供帮助。我成功使用了它。

http://robvolk.com/jquery-form-input-hints-plugin/

https://github.com/robvolk/jQuery.InputHints/

【讨论】：

【解决方案8】：

似乎我来晚了，但您可以简单地在输入元素中使用属性占位符。已经添加了一段时间了！

语法如下：

<input placeholder="text">

【讨论】：