你有没有遇到过那种，才输入一个字就开始报错的文本框？
看似很基础的问题，却又随处可见，我认为是因为设计师缺乏对前端的理解造成的。
因为我也是接触了几年的前端后，才对很多相关的知识猛然醒悟。
尤其是和文字输入相关的，过去困扰我很久，所以今天来介绍四个对设计师有用的文本输入相关前端知识：
1. 占位符不是内容填充
搜索框或其它文本框里默认的灰色字，就是占位符。
这个东西看起来虽然像是填写在文本框里的默认内容，但完全不一样，因为它是一个独立的参数，英文名是 placeholder。
这个占位符可以选择在文本框获取焦点后保留，也可以消失，但都是不能被选中的。
2. 可以自动获取焦点
你在文本框上点一下，里面出现一闪一闪的光标等待输入，这就是进入焦点态了。
文本框除了手动获取焦点外，其实很容易就可以设置自动获取焦点。
例如，不论是 Google 还是百度，这种搜索引擎都是自动获取焦点的。因为绝大部分用户使用搜索引擎的第一个步骤都是在搜索框打字，自动获取焦点能够减少一步操作，免得用户每次都要用鼠标多点一下：
其实除了搜索引擎之外，很多产品的页面，第一步操作都是输入，都可以自动获取焦点的， 例如表单页：
上图来源： C端设计师遇到B端笔试题，差点懵了
我很喜欢在交互里加这个自动获取焦点的功能，因为技术上并不难实现，但是这么做的设计师似乎不多。
3. 可以自动选择文字
其实设置自动选中文本框里的文字很容易，我自己就特别喜欢这么用：
创建一个东西时，提供一个默认名称并选中，这样如果用户想改名称就可以直接输入，不想改的话不管就行：
很适合一些必须要取名字，但是大部分用户又懒得想名字的场景。
4. 不要边输入边判断
你有没有这样的经历，设置密码的时候，刚输入一个字符就开始报错？
这是因为没有设置好判断的时机。
很多设计师出方案的时候，根本不会想这方面的问题，前端也不会想太多。因此，虽然这是个很基础的体验问题，但出现的几率真不低。
错误判断应该出现在用户确定自己输入完了，那如何知道用户输入完了呢？
很简单，用户输入完后，肯定会点击其它地方（下一个文本框/空白处/提交按钮…），让文本框失焦。
没错，失焦还是比较合理的判断时机～
但这里还有一个问题，如果用户准备输入，后来发现自己还没想清楚，就留白先填表单其它部分了。这样又引发错误判断了，也很奇怪。
看来单纯通过失焦来判断，这里的体验显然也是不好的。
可以加上没有内容就不做判断，允许用户暂时留白！
以上四个文本输入相关前端知识就分享就到这里啦~