input:focus详解

在前端开发过程中，input标签被经常使用。而在一些用户交互设计中，input标签的focus状态也显得尤为重要。下面将从多个方面详细阐述input:focus。

一、input:focus的定义

input:focus是 CSS 伪类，表示当元素获得焦点时触发。当用户点击或通过 Tab 键聚焦到元素时，此伪类便自动生效，为元素的样式提供了特定的控制方式。

二、input:focus的应用

通过input:focus，我们可以使用CSS为input元素实现当元素获取到焦点时的各种效果，比如：边框颜色的变化、阴影的变化、颜色变化等等。

border-color的变化

input:focus{
  border-color: red;
}

以上代码可以实现当input元素获取到焦点时，边框颜色变为红色。

box-shadow的变化

input:focus{
  box-shadow: 0 0 2px 2px #FF0000;
}

以上代码可以实现当input元素获取到焦点时，阴影变为红色。

背景颜色的变化

input:focus{
  background-color: #f5f5f5;
}

以上代码可以实现当input元素获取到焦点时，背景颜色变为浅灰色。

三、自定义input:focus的样式

通过自定义属性，我们可以实现更多样式的变化。

input:focus::placeholder{
	color: #666;
}

input:focus:-ms-input-placeholder{
	color: #666;
}

input:focus::-ms-input-placeholder{
	color: #666;
}

以上代码可以实现当input元素获取到焦点时，placeholder的文字颜色变为灰色。

四、input:focus在表单验证中的应用

在表单验证中，input:focus也是一个重要的应用。通过:focus，可以标明用户已选中该元素，从而提示用户在进行下一步操作之前先填写该表单项的值。如果用户忘记了某个必填项，提交表单前程序会自动检查没有填写的项并弹出提示。

同时，我们也可以使用:focus的伪类来提示用户错误填写信息的输入框。

input:focus:invalid {
  border: 2px solid red;
}

以上代码可以实现当input元素获取到焦点时，如果填写的信息不合法，边框变为红色。

五、input:focus的兼容问题

在老版本的浏览器中，可能无法识别input:focus，我们需要针对这些浏览器来进行代码调整。

input:focus{
  border: 1px solid #FF0000;/* IE6/7/8不支持box-shadow */
}

input:focus::-moz-placeholder {
  color: #666;/* 火狐浏览器*/
}

input:focus:-ms-input-placeholder {
  color: #666;/* IE10 */
}

input:focus::-webkit-input-placeholder {
  color: #666;/* Chrome和Safari浏览器 */
}

通过以上的代码，我们可以实现在低版本的浏览器中也可以支持input:focus。

六、input:focus在移动端的使用

在移动端的开发中，用户通常通过手指点击或键盘的弹起来聚焦到input元素。因此，在移动端的开发中，input:focus也是非常重要的。

以下代码可以实现在移动端点击input元素时，让键盘自动弹起来。

<input type="text" onclick="this.focus();this.select();" onfocus="if(document.activeElement != this) this.click();" />

七、总结

input:focus可以为我们在前端开发中提供更多的样式控制方式，并可以实现表单的验证等功能。同时，在移动端的开发中，也需要注意input:focus的使用，让用户体验更加优良。