实现 input 无内容时缩小居中显示，有内容、有焦点时变长显示

前两天作了一个搜索中间页，有个 input 的效果挺有意思，准备分享一下。

要求

1. 默认时（无内容、无焦点）显示居中效果。
   
2. 有焦点或者有内容，input 变长
   

测试地址

https://www.lilnong.top/stati...

实现思路

Vue + css 实现

1. <input v-model="value" :class="{'focus':value.length}"> 咱们经过内容的长度来动态修改 class ，用来实现有内容时的效果
2. input.focus,input:focus{width: 100%} 咱们经过 :focus 这个伪类来监听获取焦点的状态。

纯 css 实现

上一个方案依赖js。那有没有不依赖 js 的呢？重点在判断是否有内容

咱们如何判断呢？ 这里要依赖两个东西 required 和 :valid

required

required 属性规定必须填写内容。能够用在 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file。

:valid

:valid 选择器做用在限制值的元素上，例如 input 元素中的 min 和 max 属性，require，及正确的 email 字段, 合法的数字字段等。:valid 选择器能够在表单元素的值须要根据指定条件验证时设置指定样式。

那么问题就很简单了，咱们让他必填，这样就能够根据这个状态来显示样式。

优化一下无内容时不显示 close 按钮

方案一：固然是 js 大法了，仍是判断 value.length。
方案二：增长一个表单，而后判断根据表单的 :valid 来决定渲染状态。

微信公众号：前端linong

欢迎你们关注个人公众号。有疑问也能够加个人微信前端交流群。

总结

1. js 实现固然是兼容性极好。
2. css 实现来讲比较简单，固然兼容性就比较感人。。