在Chrome中清除焦点上的HTML5预留位置属性文字 [英] Clear HTML5 placeholder attribute text on focus in Chrome

问题描述

我可以在 Chrome 中清除焦点上的占位符文字，但Firefox会清除焦点上的文字，但Chrome不会。 / p>

这会让用户混淆栏中的文本是否被键入，还是一个占位符文本（即使我将文本颜色更改为浅灰色），我不想为了使用不必要的JavaScript或jQuery，我想知道这是否有一些HTML / CSS解决方案

演示小提琴

Chrome预览
$ b

Firefox预览（聚焦）

解决方案

尝试使用

 输入：focus ::  -  webkit-input-placeholder 
 {
 color：transparent; 
} 
  

这将解决问题。由于页面加载时的自动对焦，文字在焦点上可见。

Is there any way I can clear placeholder text on focus in Chrome, Firefox clears the text on focus but Chrome doesn't.

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

Demo Fiddle

Chrome Preview (On Focus)

Firefox Preview (On Focus)

解决方案

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.

这篇关于在Chrome中清除焦点上的HTML5预留位置属性文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！