打印

HF3003: 各浏览器中密码框掩码的外观不完全一致

作者:钱宝坤

标准参考

根据 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 对普通的文本输入框做输入监听编程,用自定义掩码字符填充输入框来制做自定义密码输入框效果。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.2
Chrome 5.0.356.2 dev
Safari 4.0.5
Opera 10.51
测试页面: input_password.html
本文更新时间: 2010-08-03

关键字

INPUT password 密码 文本框 掩码 字符 编码