输入框可以说是每一个软件、系统、app必不可少的组成部分，但是很多新产品经理不知道如何使用原来的输入框，判断逻辑不清晰。笔者结合工作实践，分享了手机版输入框的设计思路，避免了不必要的弯路。

输入框可分为以下几种类型:单行内容文本框、多行内容文本框、手机号码文本框、电子邮件地址文本框、身份证号码文本框、密码输入框、验证码输入框...

01单行内容文本框

单行内容文本框是最简单的文本框，对输入内容没有限制。与网页侧文本框不同的是，当文本框获得焦点时，键盘弹出，当按下键盘键时，可以在文本框的光标位置添加键文本。

虽然单行文本框的逻辑很简单，但是后续的文本框都是基于单行文本框进行变形或者添加条件的。

02多行内容文本框

多行内容文本框主要用于写文章、写博客等需要输入长词的地方。其原理是在单行文本框的基础上增加行数。因此，这里请注意，当你点击回车按钮时，你应该添加新行的逻辑，其他逻辑与单行文本框一致。

03手机号码文本框

由于不同国家的手机号码格式不同，我以中国大陆的手机号码输入框为例来说明手机号码输入框的逻辑。首先，手机号码是纯数字的，不能出现任何人、字母或特殊符号。

所以我们需要控制手机键盘，也就是只能输入数字。如果用户点击其他按钮，如字母、特殊字符等，则无需交互。其次，我们需要判断手机号码的数量是否是11位数字。如果不是11位数字，则手机号码填写不正确，提示客户重新填写。如果手机号码是11位数，则进入下一步，判断位数是否为1。如果不是1，则手机号码填写不正确，提示

电子邮箱

邮件输入框也是在单行内容文本框的基础上增加判断条件。

首先需要判断@的个数。正确的电子邮件中只有一个@所以我们需要判断电子邮件文本框中是否只有一个@字符。否则，输入的电子邮件格式错误，需要提示用户重新输入。

如果有，我们在判断是否有”。，如果没有“.”，输入的电子邮件地址格式错误，需要提示用户重新输入；如果有”。，我们在判断“的位置”，并且必须至少有一个“.”@之后。如果没有，则输入的电子邮件地址格式错误，需要提示用户重新输入。如果以上条件都满足，我们没有理由拒绝原假设的邮件地址正确。

05身份证输入文本框

对于身份证号码输入框，需要在单行内容输入框的前提下添加限制条件和判断条件。

限制:只能输入数字和英文字母X(因为有些用户习惯输入小写的X，所以也可以输入X)

判断条件:首先判断输入内容是否为18个字符，如果不符合条件，提醒用户身份证号输入错误；如果满足条件，则判断是否有英文字母X和X，如果有，则继续判断X和X是否只在第18位，如果没有，则提醒用户ID号输入错误；如果是，简单判断身份证号是否正确。

为什么说简单判断，因为身份证的构成有不同的含义:

1-6位是出生地址编码，如果要复杂的做还要校验地址编码是否正确7-14位是出生年月日，如果要复杂的做还要校验出生日期的格式是否正确15-16位是出生顺序号，无需校验17位是性别编号，无需校验18位是身份证校验吗，也无需校验

但是，即使所有的规则都写进去了，也有可能是身份证号码和姓名不正确。现实中公安局会联网检查输入的身份证号码是否正确。因为我们没有借口，所以我们简单地去做。

06密码文本框

密码文本框是最简单的密码输入框，在单行内容文本框的基础上增加了切换可视状态的效果。一般来说，应该根据安全要求添加一些特殊条件，如8-20个字符、数字、大小写字母、特殊符号等。可以根据实际需求添加限制。

07验证码文本框

这里的验证码是指手机短信的验证码，也是在一个单行内容文本框的基础上增加了限定条件。只能输入数字，然后有的数字是4位，有的是6位。条件可以根据实际需要添加。一般为了漂亮的更新验证码输入框，我们总是会改变输入框样式，如下图所示。

这就是本期关于移动终端常用输入框的全部内容，主要是基于我个人在实际工作中需要用到的原型，设计了axure组件。