首页  >  文章  >  web前端  >  如何在 Chrome 中自动隐藏焦点上的占位符文本?

如何在 Chrome 中自动隐藏焦点上的占位符文本?

Patricia Arquette
Patricia Arquette原创
2024-11-12 03:01:02807浏览

How Do I Auto-Hide Placeholder Text on Focus in Chrome?

自动隐藏焦点上的占位符文本

互联网浏览器自动化简化了焦点上占位符文本的隐藏,但这种便利有一个例外: 铬合金。针对这个特定的浏览器,必须实施特定的解决方案。

CSS 方法:

input:focus::placeholder {
  color: transparent;
}

此 CSS 规则将占位符文本设置为焦点时透明,有效地使

jQuery 方法:

<input type="text" placeholder="Type something here!">
 $("#myInput").focus(function() {
   $(this).attr("placeholder", "");
 });

jQuery 代码会在输入字段获得焦点时删除占位符文本,并在失去焦点时恢复它.

注意:

最初,此方法被认为是 Chrome 浏览器独有的,但现代浏览器现在支持 input::placeholder 选择器,使得 CSS 和 jQuery 都可以使用适用于所有浏览器的方法。

以上是如何在 Chrome 中自动隐藏焦点上的占位符文本?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn