我没有任何 UX 研究可以引用,但从轶事上看,我喜欢输入期望以特定格式显示数据的输入使用 **输入掩码**。 我想我会简单地列出一些演示,以便轻松参考。

Robin Herbots 的 (jQuery) Inputmask
查看 CodePen 上的 Chris Coyier (@chriscoyier) 的 jQuery 输入掩码 示例。
它需要 jQuery 依赖项,捆绑的插件大小为 180 KB(原始),因此相当庞大。
Estelle Weyl 的输入掩码
Estelle 创建了一个原生 JS 版本
查看 CodePen 上的 Chris Coyier (@chriscoyier) 的 输入掩码 示例。
没有依赖项,大小为 5 KB(原始)。 还有一个 React 组件版本。
注意
使用 VoiceOver 启用的 JS 输入掩码在表单中进行选项卡操作的快速屏幕/音频录制。 https://#/o0ChutJ2XN
— Scott Jehl (@scottjehl) 2013 年 3 月 28 日
我测试了当前版本的 Inputmask,这是一个问题。 Estelle 的版本不会出现这种情况,因为掩码是通过 placeholder
显示的,而不是输入的实际值。
Filament Group 的 Politespace
Filament Group 对 **可访问的掩码版本** 的另一次尝试来自 尝试。
查看 CodePen 上的 Chris Coyier (@chriscoyier) 的 Politespace 示例。
它与其他方法不同,因为您不会在编辑输入时使用掩码,它会在您离开输入后应用格式。
我倾向于喜欢输入掩码,但当你试图以“正确”的方式输入内容时受到惩罚,这令人沮丧。 以下是 Estelle 的过期日期字段的一个示例
我认为更好的方法是让用户输入 *任何* 他们想输入的内容,并在后台进行所有掩码处理。 以下是从我一个较旧的项目中提取的电话号码 + 分机的快速示例掩码
Gif 没有嵌入 :( 预览帖子按钮有时会非常误导。
以下是 Estelle 的:http://i.imgur.com/EHUHB4v.gif
以下是我的:http://i.imgur.com/2GTyXl1.gif
我非常喜欢这种实时预览,而不是就地掩码。 让用户写任何他们想写的内容,但向他们展示系统理解的“发送前预览”类型的内容。
是的,是的,我可以深入研究这一点。 能够完全控制输入本身,同时确切地看到它如何被解释,感觉非常棒。 如果有空间,似乎值得这样做。
它适用于某些情况,但是日期的格式非常多,你最好显示那些 DD-MM-YYYY,因为最常见的格式是,日期和月份是反转的,这取决于国家/地区
@Alex… 你使用过什么库来做这样的掩码预览吗?
让我们开始一个挑战:编写一个掩码 (用户键入时) 信用卡输入,它会在移动设备上触发正确的数字键盘。
嘿,台式机也可以有屏幕键盘!
在 iOS 上看起来非常好。 我将在更多设备上测试它。 =)
很棒的 http://parsleyjs.org/ 非常棒!
在 InputMask 的数据字段中,如果我键入
0323
,它会将2
解释为单独的,并输出03/02/203x
。 这种解释太过分了。Estelle 的过期日期不允许用户自己放置
/
,如果你试图一开始就正确地键入它,这感觉很奇怪。我认为 Filament Group 的方法也存在可访问性问题,因为它在后台 *更改了用户的答案*,除非他们重新聚焦该字段,否则他们不会知道。 这在信用卡和电话号码方面很明显:键入太多数字,它会截断多余的数字。 如果用户在输入没有要求的情况下,错误地将国家代码放在电话号码的开头,这实际上可能很重要。
我也尝试过自己编写,这真的,真的很困难,尤其对于辅助技术用户来说。 我在 *某种程度上* 做得很好的见解
– 不要将自动格式化视为阻止客户端错误消息的一种手段
– 如果不需要替换
value
,则不要替换value
(这会导致光标跳转到末尾)– 对自动格式化程序断言的猜测要非常谨慎(如上例所示的 InputMask)
– 允许用户键入他们自己的格式化符号,如果这些符号是正确的(如上例所示的 Estelle 的)
– 仅在最近键入的字符后面插入字符(事实证明,这是在屏幕阅读器中听到内容的最不奇怪的方法),并且不要在光标位置之前预先插入字符
– 除非光标位于末尾,否则不要自动格式化,因为这会替换值并导致光标跳转到末尾,从而破坏任何额外的用户输入。 这使得这些字段难以编辑(如 Estelle 的示例中所见 - 尝试在月份之前键入日期,然后“意识到”你弄错了,删除最后两位数字,然后返回到字符串的开头,首先插入月份)
总的来说,我的建议(尤其是关于可访问性)是 *不要使用它们*。
我喜欢 Kendo 套件中的掩码,但是为了仅仅一个输入掩码而添加整个库可能有点过分。
我认为它们确实允许你添加单独的 js 文件,只用于你想要使用的组件,但我认为我仍然只会在使用库的其他部分时才考虑它。
我同意 James 的观点,不使用它们,但有些时候它们很方便。在南非,一个人的身份证号码是 13 位。在按键时验证这一点有很多简单的方法,但如果已经有了库,或者在其他地方使用了掩码,那么添加一个也很简单。这样你就可以得到第一级的验证。
不要为了移除其他验证,总会有人禁用 JavaScript,但 90% 的时间都会有这种验证。以及指导用户你正在经历的事情。
我一直喜欢在可能的情况下静默地进行清理。例如,对于美国电话号码,同一个字段实际上应该接受
5551234567
(555)123-4567
555 123 4567
555-123-4567
当一个字段要求这些东西采用特定的格式时,这真的令人沮丧,*即使它告诉我是什么格式*。说真的,即使它帮我纠正了,我仍然觉得它比让我自己以自己的方式输入更具侵入性。如果它依赖于 JavaScript,情况尤其如此;如果一个字段在信用卡号中要求使用连字符,即使它在打字时添加了连字符,一旦我尝试使用 NoScript 填写表格,它就会失败。因此,我认为我们只应该在有功能上的原因必须这样做时才对用户界面挑剔。
Covarr,我使用正则表达式在输入后重新格式化电话号码,允许用户随意输入。它涵盖了你上面列出的所有格式!你的所有四个例子都被重新格式化为 (555) 123-4567。
还值得一提的是 https://github.com/text-mask/text-mask
那 http://digitalbush.com/projects/masked-input-plugin/ 怎么样?我已经使用这个插件好几年了。也许你已经提到了它,我只是错过了。
这是我最喜欢的之一。
我喜欢这个:http://igorescobar.github.io/jQuery-Mask-Plugin