文本框输入超出限制怎么办？我总结了这3个方面！

前言

键盘输入相对于点击选择来说，是一种操作成本很高的动作。输入格式错误、输入内容超出范围、内容删除方式（是否需要一键清空），都是值得探讨的点。本文将分类讨论关于文本框输入超出限制时的一些状况和思考。

基础篇：

「这个控件叫什么」系列之输入框/文本框/Text fields

@龙爪槐守望者 ：Text fields（输入框/文本框）是一个历史悠久而经典的控件，当光标位于输入框时，用户可以在其中输入或复制粘贴文本、数字等内容。

阅读文章 >

什么场景下需要/不需要设定输入限制？为什么？

短文本场景：

需要进行输入限制（如常见的账号、密码、标题等）

原因分析：

认知层面：减少浏览时的认知和记忆负担 语义层面：比如商品名，本质是形容词+名词的结构，理应不会太长 阅读层面：移动端屏幕空间有限，用户注意力难以集中，不必要的长文本根本不会被读 展示层面：简单粗暴，文字太长会放不下

长文本场景：

需要分类讨论，有限制和无限制都有可能。

有输入限制的原因：

可能是为了营造一种更轻量的阅读和表达体验。如微博之于博客。 避免过度描述，读者的注意力不够支撑，意义不大。

无输入限制的原因：

无法预测用户将要输入的信息量，因此不设限制，让用户畅所欲言。 用户输入的信息与业务密切相关，如商品评价会对商品成交有显著影响，因此不应该限制用户的点评。

如果不需要输入限制，有哪些交互方案可选？

不论是单行输入或是多行输入，输入框的高度都不发生变化。常见于搜索模块和点评模块。

随着输入内容的增加，输入框的高度也相应增加。由于键盘占据一定高度，因此要设定输入框高度的最大值。

如果需要输入限制，有哪些交互方案？

直接无法继续输入内容，无提示。见于微信的设置备注与设置名字。

当输入量濒临极值时，出现高亮的字数提示，在不打断用户的输入流程的情况下，用较为安静的方式提示用户。

当输入量超出最大值时，可以考虑用：

toast 提示，告知用户已经超出字数（抖音） 用高亮文案告知用户，已经超出范围，需要删除部分内容（脉脉） 当用户点击行动点后，方才提示用户字数超标（朋友圈）

三种方式的强调程度：高亮文字 < toast < 对话框

分段提示

微博采用了分段的形式进行提示：

正常范围，字数弱提示 超出 140 字，字数高亮 字数来到第二档位，提示转为头条文章 超出字数上限，点击发布后，会有对话框提示

总结

虽是非常细小的交互点，同样需要仔细思考，把场景分析清楚。让设计更加有理有据。

感谢阅读。

欢迎关注作者微信公众号：Change Design