如何使用提示文本预填充输入文本字段，该文本在键入时消失（jQuery）

当您单击Stack Overflow上的"Ask Question"按钮时，问题标题部分会预先填充浅灰色文本

 "what's your programming question? be specific" 

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

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

在jQuery中有一个技巧可以实现吗？

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

Answer 1

实现这一目标的最简单方法是使用html（尽管是html5）的placeholder属性：

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

但是，如果你真的想/需要使用jQuery（因为上面的html-solution只能在更现代/兼容的浏览器中使用），这里有一种方法：

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

---

编辑在最后的if添加一个缺失的) ，并且还添加一个略微修改的上面版本，其中包含略带灰色的placeholder文本（正如我假设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小提琴演示 。

Answer 2

  $(document).ready(function(){ $('#txt').click(function(){ this.value = ''; this.style.color = 'black'; }).blur(function(){ if ( this.value == '') this.value = 'whats your programming question'; this.style.color = 'lightgray'; }); }); 

Answer 3

到目前为止提供的解决方案有一个缺点：如果用户未在输入中输入任何值，则提示文本将提交给服务器。 您可以在这里找到一个更好的解决方案，也可以解决这个问题： http ： //kyleschaeffer.com/best-practices/input-prompt-text/

Answer 4

虽然我不知道如何在jQuery中做到这一点，但直接用JavaScript做这件事很简单。 只需指定一个清除字段onClick属性上的文本字段的函数，如下所示：

而你的Java脚本将是这样的：

 function clear() { document.getElementById("textID").value = ""; } 

Answer 5

这里的答案是很好的起点，然后用户可以检查提交时的提示文字值并忽略它（如果它仍然存在则不提交等）

我在使用http://kyleschaeffer.com/best-practices/input-prompt-text/解决方案工作时遇到了很多麻烦，需要在每个测试的浏览器中输入提示文本以与输入框对齐