H5 软键盘自动搜索功能

业务场景：

通常APP中的顶部搜索栏，都配一个搜索按钮。同时输入文字软键盘弹起，回车键自动变成搜索键，点击软键盘中的搜索能进行搜索功能，如下图taobao所示：

---

思考

• 软键盘的回车键，如何变成了【搜索】文字?
• 点击【软键盘】的【搜索】，如何发起的搜索功能？

实现

1、输入框元素+绑定keyup方法

• input【type=“search” 】, 在移动端会唤出“搜索”按键

<input type="search" v-model.trim="title"  @keyup="handleKeyup" autocomplete="off"/>

2、搜索方法

    handleKeyup(e) {
      if (e.keyCode === 13) {  // 监听回车键
        e.preventDefault();
        this.getList();  // your method
        document.activeElement.blur();// 关闭软键盘
      } 
    }

3、样式兼容

• input【type=“search” 】会使Input中自动有个x号，想要自定义x号，需屏蔽掉默认样式

// 去除 后面的 X号
input[type="search"]::-webkit-search-cancel-button{
  display: none;
  autocomplete:off;
}

最终效果