Html 在 Chrome 中清除焦点上的 HTML5 占位符属性文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12821746/
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
Clear HTML5 placeholder attribute text on focus in Chrome
提问by Mr. Alien
Is there any way I can clear placeholdertext on focus in Chrome, Firefox clears the text on focus but Chrome doesn't.
有什么方法可以清除Chrome 中的placeholder焦点文本，Firefox 清除焦点文本，但 Chrome 不会。
This confuses the user whether the text in the bar is typed, or it's a placeholder text (Even if I changed the text color to light grey), I don't want to use unnecessary JavaScript or jQuery for this, I want to know if there's some HTML/CSS solution for this
这让用户感到困惑，栏中的文本是键入的，还是占位符文本（即使我将文本颜色更改为浅灰色），我不想为此使用不必要的 JavaScript 或 jQuery，我想知道是否有一些 HTML/CSS 解决方案
Chrome Preview(On Focus)
Chrome 预览（聚焦）
Firefox Preview(On Focus)
Firefox 预览版（聚焦）
回答by Shubhanshu Mishra
Try using
尝试使用
input:focus::-webkit-input-placeholder
{
color: transparent;
}
It will resolve the issue. The text is visible on focus because of the auto focus on page load.
它将解决问题。由于页面加载时自动聚焦，文本在焦点上可见。
回答by András
Now firefox works in other way, so I used this code:
现在 Firefox 以其他方式工作，所以我使用了以下代码：
input:focus::-webkit-input-placeholder{
color: transparent!important;
}
input:focus::-moz-placeholder{
color: transparent!important;
}
input:focus:-moz-placeholder{
color: transparent!important;
}
回答by Andy
This is how chrome handles it, and chrome users will probably expect it to be handled like this. You could, however, use jQuery to remove the "placeholder" attribute when it is focused on.
这就是 chrome 处理它的方式，chrome 用户可能希望它是这样处理的。但是，您可以在聚焦时使用 jQuery 删除“占位符”属性。
I found an apparent fix for you, from a google group @ https://github.com/mathiasbynens/jquery-placeholder/issues/51#issuecomment-4193018
我从谷歌小组@ https://github.com/mathiasbynens/jquery-placeholder/issues/51#issuecomment-4193018 中为您找到了一个明显的解决方案
// Fixing Webkit that not clearing input/textarea when get focus
$(function(){
if ($.browser.webkit) {
$('input, textarea').on('focus',function(){
if ( $(this).attr('placeholder') ) $(this).data('placeholder', $(this).attr('placeholder')).removeAttr('placeholder');
}).on('blur', function(){
if ( $(this).data('placeholder') ) $(this).attr('placeholder', $(this).data('placeholder')).removeData('placeholder');
});
}
});
回答by MoJo
input:hover::placeholder
{
color: transparent;
} <input type="text" id="fname" name="firstname" placeholder="Your name..">回答by Lionel Morrison
I found that the Shubhanshu's solution didn't work for me, but I did find this on CSS tricksthat did work in Chrome, doesn' seem to work in FF though.
我发现 Shubhanshu 的解决方案对我不起作用，但我确实在 Chrome 中的CSS 技巧中发现了这一点，但 似乎在 FF 中不起作用。
[placeholder]:focus::-webkit-input-placeholder {
color: transparent;
}
