如何检测iOS Safari数字键盘上的「Done」按钮点击事件

针对iOS Safari中数字键盘「Done」按钮无按键事件、无法直接触发表单提交的问题，可通过失焦事件结合DOM状态判断的变通方案实现需求，以下是具体实现思路和代码示例：

核心思路 #

Safari的「Done」按钮点击只会触发输入框的blur事件，但无法直接与点击页面其他区域、点击取消按钮的场景区分。我们可以通过以下标记和延迟检查来区分不同场景：

• 标记取消按钮的点击操作，避免误触发提交
• 延迟检查输入框是否仍存在于DOM中，判断是否为取消操作
• 监听页面点击事件，区分是点击「Done」还是页面其他区域

具体实现代码 #

基础版本（区分取消按钮与Done） #

const numInput = document.querySelector('input[type="number"]');
const form = numInput.closest('form');
const cancelBtn = document.querySelector('.cancel-btn');
let isCancelled = false;

// 绑定取消按钮事件
cancelBtn.addEventListener('click', () => {
  isCancelled = true;
  // 执行输入框卸载逻辑
  numInput.remove();
});

// 监听输入框失焦事件
numInput.addEventListener('blur', () => {
  // 用setTimeout延迟检查，确保取消按钮的DOM操作已完成
  setTimeout(() => {
    // 输入框仍在DOM中，且不是取消操作 → 判定为点击Done按钮
    if (document.contains(numInput) && !isCancelled) {
      form.submit();
    }
    // 重置标记
    isCancelled = false;
  }, 100);
});

进阶版本（额外区分点击页面其他区域） #

如果需要避免用户点击页面空白区域时误触提交，可添加全局点击监听：

const numInput = document.querySelector('input[type="number"]');
const form = numInput.closest('form');
const cancelBtn = document.querySelector('.cancel-btn');
let isCancelled = false;
let clickedOutside = false;

// 监听全局点击，标记是否点击输入框外区域
document.addEventListener('click', (e) => {
  clickedOutside = !numInput.contains(e.target) && e.target !== numInput;
});

// 取消按钮逻辑
cancelBtn.addEventListener('click', () => {
  isCancelled = true;
  numInput.remove();
});

// 失焦事件处理
numInput.addEventListener('blur', () => {
  setTimeout(() => {
    // 仅当输入框存在、非取消操作、非点击外部区域时提交表单
    if (document.contains(numInput) && !isCancelled && !clickedOutside) {
      form.submit();
    }
    // 重置标记
    isCancelled = false;
    clickedOutside = false;
  }, 100);
});

注意事项 #

• setTimeout的延迟时间建议设置为100ms左右，确保DOM操作和事件队列执行完成，避免判断逻辑出错
• 若使用框架（如Vue、React），需调整DOM操作和事件绑定方式，核心判断逻辑保持一致
• 该方案属于变通实现，因为Safari本身未提供「Done」按钮的直接事件监听接口

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