输入掩码

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

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

Robin Herbots 的 (jQuery) Inputmask

这是一个积极维护的插件。

查看 CodePen 上的 Chris Coyier (@chriscoyier) 的 jQuery 输入掩码 示例。

它需要 jQuery 依赖项,捆绑的插件大小为 180 KB(原始),因此相当庞大。

Estelle Weyl 的输入掩码

Estelle 创建了一个原生 JS 版本

查看 CodePen 上的 Chris Coyier (@chriscoyier) 的 输入掩码 示例。

没有依赖项,大小为 5 KB(原始)。 还有一个 React 组件版本。

注意

我测试了当前版本的 Inputmask,这是一个问题。 Estelle 的版本不会出现这种情况,因为掩码是通过 placeholder 显示的,而不是输入的实际值。

Filament Group 的 Politespace

Filament Group 对 **可访问的掩码版本** 的另一次尝试来自 尝试

查看 CodePen 上的 Chris Coyier (@chriscoyier) 的 Politespace 示例。

它与其他方法不同,因为您不会在编辑输入时使用掩码,它会在您离开输入后应用格式。