input隐藏按钮有什么用(INPUT键是什么意思)

今天在写注册页面的时候发现一个奇怪的现象,在input框中输入密码之后会在后面出现一个眼睛图标(我并没有写这个功能)。点击图标之后会显示input框中的密码,再次点击会继续隐藏input框中的密码。密码显示按钮可协助用户确认输入内容,避免出现密码输入错误。但是这个密码显示按钮只会在开始输入的时候才会显示,当鼠标离开输入框之后就会自动隐藏。再次聚焦输入框输入时不会再次显示,需要删除输入内容之后再次输入才会触发密码显示按钮。这个用户体验并不怎么友好,而且换chrome浏览器测试时又没有(郁闷…!)。

input隐藏按钮有什么用(INPUT键是什么意思)

发现问题

通过对多款浏览器的测试发现这种现象主要在IE、Edge和IE兼容模式中出现,Chrome、FireFox、Opera、Safari等浏览器都没有出现。后来在网上查了下都说是微软为了增强用户在触控屏幕上使用浏览器的体验对用户输入操作做了优化,为 <input>标签提供了快速清除钮( type=”text”出现X图标,IE有,Edge没有)和密码文字显示钮( type=”password”出现小眼睛图标,IE、Edge都有)的功能。但是这个体验并不怎么友好, 而且如果我们在项目中已经设计了密码查看模式就会与浏览器默认图标重叠。

input隐藏按钮有什么用(INPUT键是什么意思)

禁用input自带图标

主流的浏览器的种类很多,我们当然希望统一设计风格。所以通常密码查看功能我们会在项目中自行开发,微软这个功能对我们来说反而会出现冲突,是否可以关闭这个功能呢?还好微软在为其浏览器添加该功能的同时也提供了对应的CSS私有属性,通过CSS的双伪类就可以将input自带图标清除。目前只有IE浏览器支持此双伪类,所以不指定input也可以实现。

/*清除text文本输入框的清除图标*/
input::-ms-clear{
    display: none;
} 
/*清除password密码输入框的明文图标*/
input::-ms-reveal{
    display: none;
} 
//--------------   或者   -------------
::-ms-clear, ::-ms-reveal{display: none;}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至2705686032@qq.com 举报,一经查实,本站将立刻删除。原文转载: 原文出处:

(0)
尊云-小张的头像尊云-小张
上一篇 2024 年 5 月 16 日 09:33
下一篇 2024 年 5 月 16 日 09:37

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

400-900-3935

在线咨询: QQ交谈

邮件:cong@zun.com

工作时间:365天无休服务 24小时在线

添加微信