MacBook Chrome上使用必应搜索按esc键清空输入的问题

背景

最近换了台MacBook，安装了Chrome浏览器使用必应(Bing)搜索，发现了个在第三方输入法下的现象（搜狗/百度输入法）。

MacBook + Chrome + 必应搜索 + 第三方输入法 + esc键 = 清空所有搜索框的输入。

就是在第三方输入法输入时，按esc键后，整个必应搜索框输入的内容都会被删除清空，很影响使用体验。

分析

通过打开控制台检查元素发现，是搜索框input标签的属性type="search"导致的，删除这个属性后，按esc键只是取消输入法的备选输入，而不是清空整个输入框了，这个体验很好。

解决方法

我们不能每次打开必应搜索都打开控制台进行元素修改，应该使用程序脚本帮我们自动处理。这里我们选用油猴插件（Tampermonkey）。

• 进入Chrome插件商店搜索并安装Tampermonkey。
  

• 安装好后新增脚本

• 在新增脚本的输入框输入如下代码，保存并启用。

// ==UserScript==
// @name         必应搜索Hook
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  修改必应搜索框的样式，解决MacBook上使用第三方输入法按esc后，搜索框内容全部删除的问题
// @author       John Doe
// @match        https://cn.bing.com/search*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bing.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const input = document.getElementById("sb_form_q");
    input.hasAttribute("type") && input.removeAttribute("type");
})();

代码中的@match是匹配的目标网址，需要注意一下自己本地实际对应的网址，脚本的具体逻辑在底部，获取搜索框元素，删除搜索框input标签的type属性。

启用脚本后每次打开必应搜索，使用第三方输入法按下esc键后，就不会清空整个搜索框的内容了。