如何用JavaScript检测移动端数字键盘打开，适配Stripe支付表单？

直接对比窗口高度效果差，主要是因为部分移动端浏览器（比如iOS Safari）在键盘弹出时，window.innerHeight的变化存在延迟或不准确的情况，换用以下几种方案能解决问题：

1. 结合输入框焦点事件与视觉视口监听 #

数字键盘弹出几乎都是触发于数字输入框获得焦点时，通过监听输入框的focus/blur事件，配合window.visualViewport（代表用户实际可见的视口区域）的尺寸变化，能精准判断键盘状态：

// 替换为你Stripe表单中的数字输入框选择器
const numberInput = document.querySelector('input[type="number"]');
let originalViewportHeight = window.visualViewport.height;

// 输入框获焦时开始监听视口变化
numberInput.addEventListener('focus', () => {
  window.visualViewport.addEventListener('resize', adjustBottomElement);
});

// 输入框失焦时停止监听并恢复样式
numberInput.addEventListener('blur', () => {
  window.visualViewport.removeEventListener('resize', adjustBottomElement);
  document.querySelector('.fixed-bottom-element').style.bottom = '0';
});

function adjustBottomElement() {
  const currentHeight = window.visualViewport.height;
  // 用70%作为阈值判断键盘是否弹出（可根据设备调整）
  if (currentHeight < originalViewportHeight * 0.7) {
    const keyboardHeight = originalViewportHeight - currentHeight;
    // 将底部元素的bottom值设为键盘高度，使其悬浮在键盘上方
    document.querySelector('.fixed-bottom-element').style.bottom = `${keyboardHeight}px`;
  }
}

2. 利用CSS伪类结合环境变量（补充方案） #

如果底部元素和支付表单在同一父容器下，可以用:focus-within伪类配合浏览器环境变量快速调整样式，不过兼容性有限（仅部分现代移动端浏览器支持）：

.payment-form-container:focus-within .fixed-bottom-element {
  position: absolute;
  /* 部分浏览器能直接获取键盘高度 */
  bottom: env(keyboard-inset-height);
}

3. Stripe Elements专属监听（若使用官方封装组件） #

如果你的支付表单用的是Stripe官方Elements组件（比如CardElement），需要通过Stripe提供的API监听组件的焦点状态：

const stripe = Stripe('你的公钥');
const elements = stripe.elements();
const cardElement = elements.create('card');

cardElement.mount('#card-element');

// 监听组件获焦事件
cardElement.on('focus', () => {
  window.visualViewport.addEventListener('resize', adjustBottomElement);
});

// 监听组件失焦事件
cardElement.on('blur', () => {
  window.visualViewport.removeEventListener('resize', adjustBottomElement);
  document.querySelector('.fixed-bottom-element').style.bottom = '0';
});

注意事项 #

• 不同设备和浏览器的键盘行为有差异，建议在iOS Safari、Android Chrome等主流移动端浏览器多测试；
• 视口高度阈值（如示例中的70%）可根据实际场景调整，避免误判屏幕旋转等正常视口变化；
• 若将底部元素从fixed改为absolute，需确保其父容器设置为position: relative，避免元素定位异常。

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