首页 > web前端 > css教程 > 正文

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

Patricia Arquette
发布: 2024-11-12 03:01:02
原创
845 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板