作者：钱宝坤

标准参考

根据 W3C HTML 4.01 规范中的描述，INPUT[type="password"]（密码框）与 INPUT[type="text"]（文本框）类似，但输入的文本以一种（如星号）方式渲染去隐藏其字符。这种控件通常用来进行密码输入。其当前值（current value）为用户实际输入的文本，而不是用户端实际渲染的文本。

而 W3C 没有规定用户端用于隐藏用户实际输入文本的 "掩码"的文字编码及其相关字体特性。

关于密码框 "INPUT[type=password]" 的详细信息，请参考 HTML 4.01 规范 17.4.1 中的内容。

问题描述

密码框中的掩码用来覆盖密码明文，它没有相应的规范指定统一显示样式，因此导致不同系统与不同览器中密码框 "INPUT[type=password]" 的掩码字符均有很大的差异。

造成的影响

密码框掩码的差异会在视觉上产生不同，但不会造成布局上的差异。

受影响的浏览器

所有浏览器

问题分析

通过每个浏览器的开发工具，或以下代码，我们可以检查浏览器对于 input[type=password] 标记的相关默认字体样式设置：

<input id="A" type="password" value=""/> <script>
                if(!window.getComputedStyle){ window.getComputedStyle=function($target){ return $target.currentStyle; };
                } document.write('fontFamily :' , getComputedStyle(document.getElementById('A'),null).fontFamily,
                '<br />'); document.write('fontWeight :' ,
                getComputedStyle(document.getElementById('A'),null).fontWeight, '<br />'); </script>

汇总后得到如下字体样式的差异表：

	IE6 IE8 IE8(EmulateIE7)	IE7 Firefox	Safari	Chrome	Opera
font-family	Tahoma	SimSun	SimSun	Arial	宋体
font-weight	400	400	normal	normal	400
font-size	13px	13px	13px	13px	13px

可见各浏览器中 'font-weight' 及 'font-size' 定义没有差异。

查看掩码字符，过滤的众多可疑的圆点字符后，总结出下表：

	IE7 Firefox	IE6 IE8 Chrome Safari	Opera
TEXT-UNICODE	0x25cf	0x2022	0x002a

将上下两表结合，重现各浏览中掩码字符的默认样式如下：

	IE6 IE8 IE8(EmulateIE7)	IE7 Firefox	Safari	Chrome	Opera
font-family	Tahoma	SimSun	SimSun	Arial	宋体
font-weight	400	400	normal	normal	400
font-size	13px	13px	13px	13px	13px
TEXT-UNICODE	0x2022	0x25cf	0x2022	0x2022	0x002a
显示效果	●●●	●●●	•••	•••	***

解决方案

由于掩码字符无法被修改，因此仅通过 CSS 统一密码输入框的掩码样式是不可能的。且这种差异可以忽略不计。

这里给出两种解决思路：

• 通过 CSS hack 方式对不同的浏览器设置不同的字体和字号，除去 Opera 外，可以减小掩码样式的差异。
• 或者使用 JavaScript 对普通的文本输入框做输入监听编程，用自定义掩码字符填充输入框来制做自定义密码输入框效果。

参见

知识库

• ...

相关问题

• ...