Javascript 展开搜索栏-如果输入文本，则保持展开状态

在具有默认折叠状态的搜索栏上工作，当单击时，搜索栏会随着动画展开，当不再聚焦时，搜索栏会再次折叠

如何使搜索栏在搜索字段中输入一些文本，并在输入之外单击时，如果文本存在，搜索栏将保持其展开状态

正文{
颜色：#666；
字体：90%/180%Arial，Helvetica，无衬线；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度100vh；
宽度：100%；
填充：3rem 0；
}
输入{
大纲：无；
}
输入[类型=搜索]{
-webkit外观：textfield；
-webkit框大小：内容框；
字体家族：继承；
字体大小：100%；
}
输入：：-webkit搜索装饰，
输入：：-webkit搜索取消按钮{
显示：无；
}
输入[类型=搜索]{
背景：#ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png)无重复9px中心；
边框：实心1px#ccc；
填充：9px 10px 9px 32px；
宽度：55px；
-webkit边界半径：10em；
-moz边界半径：10em；
边界半径：10em；
-webkit过渡：全部5秒；
-moz转换：全部为0.5s；
过渡：全部5秒；
}
输入[类型=搜索]：焦点{
宽度：130px；
背景色：#fff；
边框颜色：#66CC75；
-webkit盒阴影：0 5pxRGBA（109、207、246、5）；
-莫兹盒阴影：0 0 5pxRGBA（109、207、246、5）；
盒影：0 0 5pxRGBA（109、207、246、5）；
}
输入：-moz占位符{
颜色：#999；
}
输入：：-webkit输入占位符{
颜色：#999；
}
/*演示2*/
#演示-2输入[类型=搜索]{
宽度：15px；
左侧填充：10px；
颜色：透明；
光标：指针；
}
#演示-2输入[类型=搜索]：悬停{
背景色：#fff；
}
#演示-2输入[类型=搜索]：焦点{
宽度：130px；
左侧填充：32px；
颜色：#000；
背景色：#fff；
光标：自动；
}
#演示-2输入：-moz占位符{
颜色：透明；
}
#演示-2输入：：-webkit输入占位符{
颜色：透明；
}

---

使用

：有效的

选择器和

minlength

和

必需的

属性

正文{
颜色：#666；
字体：90%/180%Arial，Helvetica，无衬线；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度100vh；
宽度：100%；
填充：3rem 0；
}
输入{
大纲：无；
}
输入[类型=搜索]{
-webkit外观：textfield；
-webkit框大小：内容框；
字体家族：继承；
字体大小：100%；
}
输入：：-webkit搜索装饰，
输入：：-webkit搜索取消按钮{
显示：无；
}
输入[类型=搜索]{
背景：#ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png)无重复9px中心；
边框：实心1px#ccc；
填充：9px 10px 9px 32px；
宽度：55px；
-webkit边界半径：10em；
-moz边界半径：10em；
边界半径：10em；
-webkit过渡：全部5秒；
-moz转换：全部为0.5s；
过渡：全部5秒；
}
输入[类型=搜索]：焦点{
宽度：130px；
背景色：#fff；
边框颜色：#66CC75；
-webkit盒阴影：0 5pxRGBA（109、207、246、5）；
-莫兹盒阴影：0 0 5pxRGBA（109、207、246、5）；
盒影：0 0 5pxRGBA（109、207、246、5）；
}
输入：-moz占位符{
颜色：#999；
}
输入：：-webkit输入占位符{
颜色：#999；
}
/*演示2*/
#演示-2输入[类型=搜索]{
宽度：15px；
左侧填充：10px；
颜色：透明；
光标：指针；
}
#演示-2输入[类型=搜索]：悬停{
背景色：#fff；
}
#demo-2输入[类型=搜索]：有效，/*已添加*/
#演示-2输入[类型=搜索]：焦点{
宽度：130px；
左侧填充：32px；
颜色：#000；
背景色：#fff；
光标：自动；
}
#演示-2输入：-moz占位符{
颜色：透明；
}
#演示-2输入：：-webkit输入占位符{
颜色：透明；
}

---

对于寻找js解决方案的任何人，因为他们需要针对输入容器，不能使用

：focus

：valid

等css元素，这里有一个解决方案（css未完成）

const事件=（）=>{
document.addEventListener（'click'，event=>{
if（event.target.closest（'input'））{
event.target.closest（'.field'）.classList.add（'open'）；
}否则{
document.querySelectorAll（'.field'）.forEach（el=>{
if（el.querySelector（'input'）.value.length==0）{
el.classList.remove（'open'）；
}
})
}
}) 
} 
事件（）