手机端网页input搜索（踩坑笔记）

这几天写个小项目做个搜索框，代码如下：

<form action="#">
  <input type="text">
</form>

发现电脑网页上的只需要监听键盘按下回车的事件就可以进行搜索查询，但是在手机端的输入法中显示的是开始按钮。

input type="text"

修改一下代码，将input的type="text"属性改为type="search"：

<form action="#">
  <input type="search">
</form>

这次显示为搜索，而且在输入框输入文字后输入框尾部还有一个蓝色的x。

input type="search"

但是还有一个bug，就是点击搜索手机端页面会自动刷新，那我们再修改一下代码。

<form action="#">
  <input type="search">
  <input type="text" style="display: none;">
</form>

这次我加了一个type="text"的input，并使其隐藏起来。这样点击搜索手机端页面便不会刷新，可以正常执行操作。

成功

注：

监听input的textarea值的变化，代码如下：

xxx.addEventListener('input', (event)=>{
  console.log(event.target.value)
})