占位符attr的不同行为

时间:2013-12-15 15:36:52

标签: html5 google-chrome firefox placeholder

我正在尝试使用占位符属性,但我注意到如果我将字段集中在Chrome上,占位符就会消失,在Firefox中它只会在第一次keydown之后消失。

我喜欢Firefox的行为:我如何强制Chrome以同样的方式行事?

非常感谢

1 个答案:

答案 0 :(得分:3)

specification州(强调我的) -

  

用户代理应该在拥有后向用户显示此提示   当元素的值为空时,剥离的线会从中断   字符串控件未集中(或两者),例如通过显示它   在一个空白的未聚焦控件内,否则隐藏它。

这意味着浏览器可以实现上述方法。要偏离浏览器默认行为,您可能必须编写一个自定义JavaScript解决方案,该解决方案将具有on keyup事件处理程序并将输入值与空字符串进行比较。

我个人会在输入上使用data-placeholder属性来实现它,以保存值。

尽管如此,Chrome似乎已经改变了Chrome Canary和Chrome 31(当前版本)的默认行为,在用户开始输入JS Fiddle I链接之前,占位符值仍然可见。

此行为仅在浏览器的“桌面”版本上进行测试,并且仅在Windows操作系统上进行测试。即使使用相同的浏览器,其他平台也可能存在一些差异。

Chrome自动更新,实际上相对难以防止这种情况发生,因此您的许多用户极不可能使用与Chrome 14(2011年9月发布)一样旧的版本。一般来说,根据我的经验,统计数据会显示正在使用的Chrome版本在最后三个版本之间划分,通常主要是当前版本和之前版本(比率取决于自上次发布以来的时间)。

因此,您的问题似乎不太可能影响许多(如果有)用户。

请注意specification中的以下内容 -

  

注意:使用占位符属性作为标签的替代品   可以降低范围控制的可访问性和可用性   包括老年用户和具有认知,移动性的用户的用户   精细运动技能或视力障碍。虽然给出了暗示   控件的标签始终显示,提示中的短提示   占位符属性仅在用户输入值之前显示。   此外,占位符文本可能会被误认为是预填充值,   并且通常实现占位符文本的默认颜色   提供不充分的对比度和缺乏单独的可见   label减小了可用于设置焦点的命中区域的大小   在控制上。

请不要使用占位符作为标签的替代品,或者至少为了辅助功能而使用隐藏标签(如您引用的Google示例中所示)。