HTML代码中input标签enterkeyhint等于search优化移动端搜索键-html教程-PHP中文网

必须使用 type="search" 并配合 enterkeyhint="search"，优先监听 search 事件而非 keydown；iOS Safari 对 text 类型的 enterkeyhint 支持差，type="search" 才可靠触发软键盘搜索键并自动清空。

html代码中input标签enterkeyhint等于search优化移动端搜索键

移动端软键盘搜索键不显示？检查 `enterkeyhint` 值是否合法

只有当 input 的 type 是 search、text、url、tel、email 或 password 时，enterkeyhint="search" 才会被浏览器（尤其是 iOS Safari 和 Chrome for Android）识别并渲染为「搜索」键。如果 type="number" 或 type="hidden"，该属性直接被忽略。

enterkeyhint 是提示性属性，不是强制指令；浏览器有权忽略或降级处理
iOS 15.4+ 和 Android Chrome 71+ 支持较好，旧版 Safari（如 iOS 14）可能完全不生效
若同时设置了 inputmode="search"，会增强语义，但不能替代 type="search"

`type="search"` 比 `type="text"` + `enterkeyhint="search"` 更可靠

单纯靠 enterkeyhint 不足以保证搜索键出现——iOS Safari 对 type="text" 的 enterkeyhint 支持极不稳定，而 type="search" 自带默认行为：软键盘显示「搜索」键、自动添加清空按钮、触发 search 事件而非 input 或 keydown。

必须用，双保险更稳妥
不要依赖 JS 拦截 Enter 键码模拟搜索——移动端软键盘「搜索」键不一定触发 keyCode === 13，尤其在 iOS 上可能只发 input 事件
注意：type="search" 在部分安卓 WebView 中会多出一个 × 清除按钮，CSS 可用 input[type="search"]::-webkit-search-cancel-button 控制

监听搜索提交别只靠 `keydown`，优先用 `search` 事件

type="search" 元素原生支持 search 事件，它在用户点击软键盘「搜索」键、点击清除按钮后再次提交、或失焦且值非空时触发。相比监听 keydown 判断 event.key === "Enter"，它更准确、兼容性更好。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

<input type="search" id="q"><script>
  document.getElementById("q").addEventListener("search", (e) => {
    if (e.target.value.trim()) {
      doSearch(e.target.value);
    }
  });
</script>