表单编辑时脱敏样式

1、在电脑空白区域单击鼠标右键，新建一个wps表格，鼠标左键双击打开。

2、选择要构成表格的区域，然后右键单击以选择“设置单元格格式”选项。

3、弹出如下图所示“单元格格式”设置对话框。

4、切换到“边框”并选择内边框和外边框。

5、切换到“字体”并设置字体，字体大小和样式。设置完成后，单击“确定”按钮。

6、表格边框、字体和字号设置完成。

7、根据需要在表格中输入数据，并调整数据的对齐等。

8、选择单元格的行，单击鼠标右键，然后选择“行高”以设置表格的行高。

9、以相同的方式，设置表的列宽。

10、设置完成后，单击“保存”按钮，完成操作。

目录：

1、表单输入通用规则

2、输入框提示

3、表单样式

4、输入框限制

5、异常情况处理

1】输入通用规则：

1、显示标题、输入框、输入框提示语、是否为必填项

2、用户获取焦点，输入内容后隐藏默认文案，显示清除图标

3、用户已输入内容，重新获取焦点，修改，显示清除图标，不自动清除已输入内容

4、用户已输入内容，失去焦点，校验输入框内容，校验失败，显示对应的提示语，提示语显示在文本框下方，自动调整文本框上下间距。

5、清空文本框，显示默认文案，隐藏清除图标

6、已校验失败情况，文本框再次获取焦点输入任意内容，隐藏提示语，失去焦点再次校验（同4）

7、获取焦点，弹出输入键盘遮挡了输入框内容，页面自动上移

2】输入框提示方式：

1、提示语在输入框下方显示

2、toast提示

3】输入框样式选择：使用输入框或长下划线

①：输入框+输入提示语：默认显示输入框提示语，输入完成后直接显示输入的内容

（图左✓）适应于表单项内容差别明显，表单项内容意义相近

（图右✗）用户输入内容后查看时，会对输入的内容产生歧义

②：标题+输入框+输入提示语：

默认输入标题、输入框、输入提示语；输入框和输入标题一行显示：

（图左✓）适应输入框标题字数相近（1-2字以内）且输入框内容限制字数能一行显示完整

（图右✗）输入框标题文字差别会影响页面布局的整齐性

③：标题+输入框+输入提示语：

默认输入标题、输入框、输入提示语；

（图左✓）标题和输入框一行显示：手机一屏高度可容纳的表单项少，易读性不强

（图右✗）标题和输入框分行显示：手机一屏高度可容纳的表单项少，易读性较强

4】输入框输入限制：

1、 字符限制：中英文、特殊字符、数字、emoji等

2、字数限制：单行输入15-20字

4、输入异常提示语显示文案

5、是否是必填项

6、多行文本注明是否支持用户换行

5】异常状态：

1、表单页返回确认弹窗

2、提交按钮校验

3、考虑当前页面异常状态

①杀掉进程，不保存当前编辑的信息，此前保存过的信息不更改。

②退出重新登录，登录同一个账号，显示已保存信息可继续编辑。登录其他账号，不显示

③在本机保存后切换其他设备，不显示

④点击保留不需要校验合法性，提交时才校验