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

Question

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

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

谢谢:)）

Answer 1

第一款谷歌结果为 “jquery hint text” 是this plugin，它看起来像你想要什么。

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

Answer 2

jquery autocomplete怎么样？

Answer 3

使用jQuery的1.5.1和jQuery UI的1.8.9，从工具提示代码将是什么JQ UI 1.9沿： http://jsfiddle.net/JAAulde/XpbGh/1/

编辑： 看来，当我发布信息时，你添加了关于你想要的信息，但这不完全。

Answer 4

编辑：好吧我不明白“提示文本”，对不起。

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

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

} 

Answer 5

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没有实现这一点。

Answer 6

这是我用于实施helptext或占位符的项目的函数。我希望有人会觉得它有用。

$(' #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(); 
    } 
}); 

Answer 7

还有一个名为inputHints的类似jQuery插件。我利用JavaScript的placeholder属性来支持尚不支持它的浏览器。

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

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

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

Answer 8

好像我有点晚了，但你可以简单地使用你的输入元素中的属性占位符。它已被添加了一段时间了！

这里的语法：

<input placeholder="text">