Input自动聚焦无法唤起软键盘

尧雨溪
1,236 阅读2分钟

原因：浏览器的安全限制

  1. 用户交互限制
    • 浏览器为了防止恶意脚本在页面加载后未经用户许可直接触发键盘弹出，要求任何可以唤起软键盘的操作必须由用户的明确交互（如点击、触摸）
  2. 防滥用策略
    • 这是浏览器的一种防滥用策略，特别是在移动设备上。未经用户交互的情况下无法弹出键盘
  3. 首次页面加载限制
    • 在页面加载后，只有用户手动交互（如点击按钮或触摸输入框）focus() 才会唤起软键盘

解决方法

1. 必须通过的用户交互步骤

. iOS 额外处理*

对于 iOS 设备，软键盘触发更加严格，可能需要结合点击事件和 readonly 属性的动态调整来触发。 例如弹出弹窗里面的input自动聚焦唤起软键盘 点击按钮 唤起软键盘等等

**2. 纯 HTML 和 JavaScript 示例为何能触发软键盘？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自动获取焦点</title>
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname" id="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 autofocus 属性。</p>

<script>
  // 确保页面加载完成后再触发 focus
  window.onload = function() {
    document.getElementById('fname').focus(); // 手动聚焦
  };
</script>

</body>
</html>

  1. 直接操作 DOM

    • 在原生 HTML 和 JavaScript 中，你通过 document.getElementById('fname').focus() 操作的是真实的
    • 浏览器可以直接处理这些 DOM 操作。

  2. 没有框架的抽象层

    • 在纯 JavaScript 中，window.onload 代码
    • 浏览器直接响应 focus() 的调用

  3. 安全策略的宽松性

    • 某些浏览器对纯 HTML 页面在初次加载时的 focus() 的操作

  4. 有些框架中为何不行例如（Angular） 为何不触发软键盘？

Angular 的事件模型干预
Angular 使用 Zone.js 来拦截和管理所有异步操作。虽然 focus() 被调用了，但它可能被浏览器判定为非直接用户交互，因为 Angular 的操作是框架管理的。

浏览器的更严格安全策略
现代浏览器（尤其是移动端）对输入事件的安全性要求更高，特别是防止脚本自动唤起软键盘。 在 Angular 中，即使页面加载时调用 focus()，也可能被判定为非可信事件，无法触发软键盘。 这是因为 Angular 的初始化流程比原生 HTML 复杂得多，包括引导、模板编译和变更检测，可能延迟了 focus() 的触发。

软键盘依赖用户交互
触发软键盘的行为是由用户交互决定的。浏览器会检查 focus() 是否来自鼠标点击、键盘输入或触摸事件，而 Angular 的生命周期钩子（如 ngAfterViewInit）并非用户交互，浏览器直接屏蔽了软键盘。

avatar
文章
阅读
粉丝