如何使用在键入时消失的提示文本预填充输入文本字段 (jQuery)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4289025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prepopulate input text fields with prompting text which disappears on typing (jQuery)
提问by Donovan L.
When you click on the "Ask Question"button on Stack Overflow, the question title section is prepopulated with light gray text that reads
当您单击"Ask Question"Stack Overflow上的按钮时，问题标题部分会预先填充浅灰色文本，内容为
"what's your programming question? be specific"
Then when you click inside the Title field and start typing, that text disappears.
然后，当您在“标题”字段内单击并开始键入时，该文本将消失。
I want to do the same thing in my app.
我想在我的应用程序中做同样的事情。
Is there a trick in jQuery to accomplish that?
jQuery 中有什么技巧可以做到这一点吗？
And, specifically, how do you change the text color from light gray for the placeholder text to the default text color when someone starts typing?
而且，特别是，当有人开始输入时，如何将占位符文本的文本颜色从浅灰色更改为默认文本颜色？
回答by David says reinstate Monica
The easiest way to achieve this is with html (albeit html5)'s placeholderattribute:
实现这一点的最简单方法是使用 html（尽管是 html5）的placeholder属性：
<input type="text" placeholder="Enter email address." name="email" />
It will appear as "lighter colored" text that disappears when the user starts entering something.
它将显示为“浅色”文本，当用户开始输入内容时该文本会消失。
However, if you really want/need to use jQuery (as the above html-solution is only usable in the more modern/compliant browsers), here's a way:
但是，如果您真的想要/需要使用 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'));
}
});
});
});
Edited编辑以
))在 final 中添加一个缺失ifif，并且还添加了一个稍微修改过的上述版本，该版本具有稍微变灰的placeholderplaceholder文本（我认为 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');
}
});
});
});
回答by Bogdan
The solutions presented so far have a drawback: the prompted text is submitted to the server if the user doesn't enter any value in the input. You can find here a better solution that also takes care of this issue: http://kyleschaeffer.com/best-practices/input-prompt-text/
到目前为止提出的解决方案有一个缺点：如果用户没有在输入中输入任何值，提示文本将提交给服务器。您可以在这里找到一个更好的解决方案，也可以解决这个问题：http: //kyleschaeffer.com/best-practices/input-prompt-text/
回答by Ali Tarhini
<input type="text" value="whats your programming question" id="txt"/>
$(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';
});
});
回答by Telmo Marques
Though I don't know how to do it in jQuery, it's pretty simple to do so directly with JavaScript. Just assign a function that clears the text field on the onClick property of the field, like so:
虽然我不知道如何在 jQuery 中做到这一点，但直接使用 JavaScript 做到这一点非常简单。只需分配一个函数来清除字段的 onClick 属性上的文本字段，如下所示：
<input type="text" id="textID" onclick="clear" />
And you Java script would be something like:
你的Java脚本将是这样的：
function clear()
{
document.getElementById("textID").value = "";
}
回答by Joshua
The answers here are great starting points, the user can then check for the promptext value on submit and ignore it (or not submit if it is still there, etc)
这里的答案是很好的起点，然后用户可以检查提交时的提示文本值并忽略它（或者如果它仍然存在则不提交等）
I had a lot of trouble getting the http://kyleschaeffer.com/best-practices/input-prompt-text/solution working re getting the prompt text to line up with the input box in every browser tested
我在让http://kyleschaeffer.com/best-practices/input-prompt-text/解决方案工作时遇到了很多麻烦，重新让提示文本与测试的每个浏览器中的输入框对齐
