数码|B端UI交互界面基础组件——输入框( 二 ) |组件|界面|

本文插图

当上部与右侧空间显示区域均受限时，提示文本在输入框底部显示：

本文插图

当底部显示右侧可见区域受限时：

本文插图
2. 交互行为

1）可用状态下文本输入框获取焦点后，应当进行诸如边框线、颜色等变化，如图所示：

2）当输入框合法性规则对输入字符长度有限制时，不支持输入超过约定的字符长度。
3）当具备合法性验证规则（仅有长度限制外）的文本输入框处于初始状态（未填入任何值，未获取过焦点），首次获取焦点时， Tip显示输入合法性规则。

本文插图

4）当输入框有水印文本时，在获取焦点后水印文本需要可见，而当输入框有输入内容时，水印文本则消失。
未输入内容：

本文插图

输入内容后：
5）当输入框内容发生改变时，进行及时的格式合法性校验，如校验正确则不显示合法性输入提示信息；如果合法性输入提示文本处于可见状态，则隐藏合法性输入提示。
6）当输入框中的输入内容非法时，则边框变更为输入错误提示状态，同时显示合法性验证规则，如果有多条规则，则并行检测多条合法性规则，对非法项需要重点标出。

本文插图

7）当输入框焦点移除时，需要进行二次校验。
8）当输入规则需要在后台进行有效性检查（如不允许重复）时，需要遵循以下规则：

触发后台检查动作需要在输入框移除焦点后自动触发；
前台校验结果为合法。

后台校验过程中需要提供过程，校验状态等图标标示：
在后台检验过程中如果输入框内容发生了变化，需要取消上次等待检验返回的消息监听。
9）后台校验结果为非法，显示后台校验错误的图标，同时标注输入框输入不合法的状态：
输入框未获取焦点：
输入框已获取焦点（后台校验返回的错误提示以实际为准）：
10）后台校验过程中，后台返回异常、超时等需要标注异常状态的图标，鼠标移入显示异常信息，并且支持鼠标点击重试：
11）对已完成后台数据校验，文本输入框内容发生变更时，自动隐藏后台校验状态图标。
12）鼠标移入帮助图标区域时， Tips提供帮助信息：
三、总结
关于B端基础交互组件“输入框（上）”的相关分享就到这里，下一章我们介绍“输入框（下）”包括多行文本、下拉选择组件的相关交互规范。
题图来自 unsplash ，基于 CC0 协议