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

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

前言

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

基础篇：

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

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

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

短文本场景：

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

原因分析：

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

长文本场景：

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

有输入限制的原因：

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

无输入限制的原因：

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

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

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

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

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

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

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

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

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

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

分段提示

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

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

总结

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

感谢阅读。

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