我还在打字，别急着报错呀！

你有没有遇到过那种，才输入一个字就开始报错的文本框？

看似很基础的问题，却又随处可见，我认为是因为设计师缺乏对前端的理解造成的。

因为我也是接触了几年的前端后，才对很多相关的知识猛然醒悟。

尤其是和文字输入相关的，过去困扰我很久，所以今天来介绍四个对设计师有用的文本输入相关前端知识：

1. 占位符不是内容填充

搜索框或其它文本框里默认的灰色字，就是占位符。

这个东西看起来虽然像是填写在文本框里的默认内容，但完全不一样，因为它是一个独立的参数，英文名是 placeholder。

这个占位符可以选择在文本框获取焦点后保留，也可以消失，但都是不能被选中的。

2. 可以自动获取焦点

你在文本框上点一下，里面出现一闪一闪的光标等待输入，这就是进入焦点态了。

文本框除了手动获取焦点外，其实很容易就可以设置自动获取焦点。

例如，不论是 Google 还是百度，这种搜索引擎都是自动获取焦点的。因为绝大部分用户使用搜索引擎的第一个步骤都是在搜索框打字，自动获取焦点能够减少一步操作，免得用户每次都要用鼠标多点一下：

其实除了搜索引擎之外，很多产品的页面，第一步操作都是输入，都可以自动获取焦点的，例如表单页：

上图来源：C端设计师遇到B端笔试题，差点懵了

我很喜欢在交互里加这个自动获取焦点的功能，因为技术上并不难实现，但是这么做的设计师似乎不多。

3. 可以自动选择文字

其实设置自动选中文本框里的文字很容易，我自己就特别喜欢这么用：

创建一个东西时，提供一个默认名称并选中，这样如果用户想改名称就可以直接输入，不想改的话不管就行：

很适合一些必须要取名字，但是大部分用户又懒得想名字的场景。

4. 不要边输入边判断

你有没有这样的经历，设置密码的时候，刚输入一个字符就开始报错？

这是因为没有设置好判断的时机。

很多设计师出方案的时候，根本不会想这方面的问题，前端也不会想太多。因此，虽然这是个很基础的体验问题，但出现的几率真不低。

错误判断应该出现在用户确定自己输入完了，那如何知道用户输入完了呢？

很简单，用户输入完后，肯定会点击其它地方（下一个文本框/空白处/提交按钮…），让文本框失焦。

没错，失焦还是比较合理的判断时机～

但这里还有一个问题，如果用户准备输入，后来发现自己还没想清楚，就留白先填表单其它部分了。这样又引发错误判断了，也很奇怪。

看来单纯通过失焦来判断，这里的体验显然也是不好的。

可以加上没有内容就不做判断，允许用户暂时留白！

总结一下

其实我也不太清楚具体有多少人知道或不知道，来个投票看看：

如果反响不错的话，以后我再继续分享这之类的内容～

想要学习或者练习体验/交互设计的朋友，可以了解一下「体验设计学习社」。作品集详细点评+答疑+免费训练营&学习打卡等活动，更有各类大厂内推：