常见的输入框你真的懂吗？有时候开发一个输入框需要3天，真的需要这么多。对于非商务人士来说，输入框只是一个方框或者横线。我们以最常见的登录页面为例，说说输入框。

登录页面输入框

这是美团、饿了么、JD.COM、丁咚四个常用应用的登录页面。

这里其实有两个按键输入框，分别是手机号/用户名/账号输入框和密码/验证码输入框，但是一个输入框的形式很多。

默认状态点击状态输入部分内容输入完整内容错误、异常提示密码框可见与不可见特定前后缀输入框带区号的组合输入框带移除图标输入框不可输入状态输入框

默认状态

进入登录页面的显示页面，显示用手机号登录的输入框。现在正常情况下会有提示信息。比起错误信息，我们应该更仔细地设计，以防止这种问题的发生。在用户的选择动作发生之前，有必要防止用户混淆或做出错误的选择。

这里有一个带区号的组合输入框。可以点击+86部分更改区号，然后输入手机号码提示灰色字显示输入类型，或者输入用户名或账号；

手指点击输入框，光标引导输入，弹出输入键盘。在白色区域的输入框中点击空，即可撤销。这里充分利用了尼尔森十大原理中的可控性原理，是用户可控性和自由性的展现。

部分输入和完全输入

当这里只输入手机号时，底部的登录按钮变灰，手机号按344位数字显示。根据米勒定律的分段记忆原理，方便记忆，用户不易输入错误。如果手机号码的输入号码超过11位，则限制输入。这里也是根据具体的输入框来定义的，比如手机号、身份证号等有具体数字的字符。

而且因为交互体验系统越来越完善，这些特定字符的输入键盘会变成数字键盘。如果输入“*”和“#”，提交验证码时会提示手机号码不正确。

而且现在大部分登录之类的输入框都是在输入框下面设计了按钮，以保证弹出的键盘不会挡住按钮，降低体验。

特定前缀输入框

在一些应用和网站中，前缀会是http://或https://等一系列超文本链接格式，后缀会是。为了方便用户快速清晰地输入内容，防止输入错误，用户只需输入更改的部分。还有一些人不设置前缀和后缀，搜索地址，智能自动完成地址信息。它们在特定格式中很常见，如网站和邮箱，允许用户自由选择不同类型的前缀和后缀，如邮箱。

错误提示

错误提示:这里有两种情况，一种是账号密码输入错误，另一种是环境条件异常，比如断网无法连接服务器。

提示方式也根据实际情况显示在相应的输入框下，异常环境情况用toast提示

用于其他页面的其他类型的输入框

特定数字、金额类的输入框特定账号的输入框，带前后缀的文本输入框，带字符限制和不带字符限制聊天输入框是否允许输入特殊字符

看似简单的东西越复杂，在制作输入框时，每一个状态都需要考虑和设计，其他细节都需要用产品来确定和大大标记。背后的很多逻辑和状态也来自于我之前经历的不够多的坑，当然也不全面。有兴趣可以留言讨论，一起进步。