iframe内input聚焦不弹出虚拟键盘如何通过JS强制唤起？

核心原因是浏览器对跨域iframe的焦点事件监听存在隔离，VR环境、Chrome虚拟键盘扩展的唤起规则更严格，仅可信用户交互触发的聚焦操作才会触发虚拟键盘弹出，以下是两种场景的实现方案：

1 同域iframe场景 #

可直接访问iframe内部DOM，绑定聚焦事件主动触发键盘：

const targetIframe = document.querySelector('#iframe的ID')
targetIframe.addEventListener('load', () => {
  // 匹配iframe内所有输入框，可根据需求修改选择器
  const innerInputs = targetIframe.contentDocument.querySelectorAll('input')
  innerInputs.forEach(input => {
    input.addEventListener('focus', () => {
      // 调用标准虚拟键盘API
      if ('virtualKeyboard' in navigator) {
        navigator.virtualKeyboard.overlaysContent = true
        navigator.virtualKeyboard.show()
        return
      }
      // 兼容不支持标准API的环境
      const tempInput = document.createElement('input')
      tempInput.style.cssText = 'position: absolute; top: -999px; left: 0; opacity: 0;'
      document.body.appendChild(tempInput)
      tempInput.focus()
      setTimeout(() => {
        tempInput.remove()
        input.focus()
      }, 50)
    })
  })
})

2 跨域iframe场景（如Stripe支付组件） #

第三方iframe禁止直接访问内部DOM，需使用组件官方提供的事件回调处理：

• Stripe的信用卡号、有效期、CVC组件都提供了focus事件回调，绑定回调后主动触发键盘即可

// 初始化Stripe Elements示例
const elements = stripe.elements()
// 信用卡号组件
const cardNumber = elements.create('cardNumber')
cardNumber.mount('#card-number-container')
// 绑定聚焦事件
cardNumber.on('focus', triggerVirtualKeyboard)

// 有效期组件
const cardExpiry = elements.create('cardExpiry')
cardExpiry.mount('#card-expiry-container')
cardExpiry.on('focus', triggerVirtualKeyboard)

// CVC组件
const cardCvc = elements.create('cardCvc')
cardCvc.mount('#card-cvc-container')
cardCvc.on('focus', triggerVirtualKeyboard)

// 统一的键盘触发逻辑
function triggerVirtualKeyboard() {
  if ('virtualKeyboard' in navigator) {
    navigator.virtualKeyboard.overlaysContent = true
    navigator.virtualKeyboard.show()
    return
  }
  // 备用触发方案
  const triggerInput = document.createElement('input')
  // Stripe信用卡输入是数字键盘，可根据输入类型修改inputmode
  triggerInput.setAttribute('inputmode', 'numeric')
  triggerInput.style.cssText = 'position: fixed; top: -999px; left: 0; opacity: 0;'
  document.body.appendChild(triggerInput)
  triggerInput.focus()
  setTimeout(() => triggerInput.remove(), 30)
}

注意事项 #

• 所有键盘唤起操作必须在用户交互事件链中执行，比如点击、触摸事件的回调链路内触发，浏览器会拦截非用户主动触发的键盘唤起请求
• Oculus VR环境下建议提前申请input权限，避免键盘唤起被系统拦截
• 不要尝试直接操作跨域iframe的内部DOM，会触发浏览器跨域安全限制报错

内容的提问来源于stack exchange，提问作者bondythegreat