占位符属性的不同行为

我正在尝试使用placeholder属性,但我注意到如果我将焦点放在Chrome上的占位符消失了,那么在Firefox中它只会在第一次按下按钮后消失。

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

非常感谢


规范说明(强调我的) -

用户代理应该向用户提供该提示,在从其中剥离换行符,当元素的值为空字符串或者控件未被聚焦 (或两者 )时,例如通过将其显示在空白未聚焦的控件内并且否则将其隐藏。

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

我会亲自实现这个使用输入数据占位符属性来保存该值。

事实上,Chrome浏览器似乎已经改变了它的默认行为,就像使用Chrome Canary和Chrome 31(这是当前版本)一样,占位符值仍然可见,直到用户开始输入JS链接的JS小提琴。

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

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

因此,您的问题似乎不会影响很多(如果有的话)用户。

请注意以下来自规范的内容 -

注意:使用placeholder属性作为标签的替代品可能会降低控件对一系列用户的可访问性和可用性,这些用户包括具有认知,移动性,精细运动技能或视觉障碍的旧用户和用户。 尽管始终显示控件标签给出的提示,但仅在用户输入值之前才显示占位符属性中给出的简短提示。 此外,占位符文本可能被误认为预先填充的值,并且通常实现占位符文本的默认颜色提供的对比度不足,并且缺少单独的可见标签减少了可用于将焦点设置在控件上的命中区域的大小。

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

链接地址: http://www.djcxy.com/p/70537.html

上一篇: Different behaviors of placeholder attr

下一篇: Remove IE10's "clear field" X button on certain inputs?