jQuery：在用户开始输入后更改输入值颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6389291/
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
jQuery: Change input value color after user begins typing
提问by Clayton C
I've got a form input that has sample search keywords inside.
我有一个表单输入，其中包含示例搜索关键字。
When the user focuses the input the text disappears, if there is nothing in the input the text reappears when unfocused.
当用户聚焦输入时，文本消失，如果输入中没有任何内容，则文本在未聚焦时重新出现。
That's all good and works well but what I'd like to do is have the sample text grayed out and then have the normal solid color when the user is actually typing.
这一切都很好，而且效果很好，但我想做的是让示例文本变灰，然后在用户实际键入时使用正常的纯色。
Below is the code I'm currently using. Any help would be great!
下面是我目前使用的代码。任何帮助都会很棒！
$(function() {
$('input').each(function() {
$.data(this, 'default', this.value);
}).focus(function() {
if (!$.data(this, 'edited')) {
this.value = "";
}
}).change(function() {
$.data(this, 'edited', this.value != "");
}).blur(function() {
if (!$.data(this, 'edited')) {
this.value = $.data(this, 'default');
}
});
});
回答by James Montagne
Like this?
像这样？
$(function() {
$('input').each(function() {
$.data(this, 'default', this.value);
}).css("color","gray")
.focus(function() {
if (!$.data(this, 'edited')) {
this.value = "";
$(this).css("color","black");
}
}).change(function() {
$.data(this, 'edited', this.value != "");
}).blur(function() {
if (!$.data(this, 'edited')) {
this.value = $.data(this, 'default');
$(this).css("color","gray");
}
});
});
Simply sets it to gray initially, then black whenever focused and back to gray if the default text is set again.
只需将其最初设置为灰色，然后在聚焦时为黑色，如果再次设置默认文本，则返回灰色。
回答by Christian Cody
There's the placeholder="something" attribute in HTML5. So you'd say, <input type="text" placeholder="something" /> I think this is the best answer, since Jquery is not needed to do this.
HTML5 中有 placeholder="something" 属性。所以你会说， <input type="text" placeholder="something" /> 我认为这是最好的答案，因为 Jquery 不需要这样做。
回答by js1568
Use .css()to add colorstyle to your input
使用.css()添加color样式到您的input
回答by Patricia
i'd suggest using a plugin like labelOver instead of messing around with the text and style of the input!
我建议使用像 labelOver 这样的插件，而不是搞乱输入的文本和样式！
http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/#labelOver
http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/#labelOver
