h5移动端软件盘换行变搜索

为了让软件盘上的换行变成搜索，需要做：

• input 的 type 属性设置为 search。
• input 外面要套个 form 标签，并且form要设置 action 属性，值可以为空。
• 移动端软件盘的回车会触发form的submit事件，所以我们只需要监听form的submit事件就可以实现按回车按钮进行搜索的功能，但是 form的submit事件默认会刷新页面，因此我们要阻止submit事件的默认行为。亲测e.preventDefault()可以阻止默认行为，但是 return false好像不行，还是会刷新页面。
• 点击软件盘上搜索按钮后，软件盘未收起这很影响用户体验，目前是通过让input失去焦点来让软件盘收起的。

以下是代码实现：

开发环境react，微信网页开发

<form className="list-filter-center" action="" onSubmit={this.onSubmit.bind(this)}>
    <input
      ref={this.inputRef}
      value={this.state.query.q}
      placeholder="班级编号/某老师"
      type="search"
      onChange={this.changeQ.bind(this)}
    />
 </form>

onSubmit(e){
    // 阻止刷新页面
    e.preventDefault();
    // input失去焦点让软件盘收起
    this.inputRef.current.blur();
    // 搜索逻辑...
}

参考文献

js回车键事件