input隐藏按钮有什么用（INPUT键是什么意思）

尊云-小张 • 2024 年 5 月 16 日 09:36 • 行业动态 • 阅读 1

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

Table of Contents

发现问题

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

禁用input自带图标

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

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