webApp 移动端键盘显示 搜索 按键

webApp 移动端键盘显示 搜索 按键

实现

需要使用 form标签包裹 <input type="search" />。例如：

<form>
    <input type="search" placeholder="搜索" />
<form>

当移动端键盘输入字符后，键盘上会显示一个 “搜索”的按键。

问题

但是以上的这种方法，在部分手机上会出现点击了键盘上的搜索，页面会跳转到一个 url，这是我们不希望看到的。

解决方式

• 如果你希望搜索同步提交，直接在form标签上添加action属性指定url, 并且指定 method 请求方式 post 或者 get。

<form action="url" method="get">
    <input type="search" placeholder="搜索" />
<form>

• 如果你不希望表单自动提交，而是自己通过 ajax实现搜索，那么就需要给 form 标签添加 οnsubmit=”return false”

<form onsubmit="return false;">
    <input type="search" placeholder="搜索" />
<form>