iOS Safari中Vue.js WebApp游戏摇一摇触发撤销/重做问题咨询

嘿，这个问题我之前帮不少开发者踩过坑——iOS Safari的摇晃撤销/重做确实有点“记仇”，哪怕Vue已经把表单页面彻底替换掉，WebKit还会攥着之前的输入操作历史不放。我给你几个靠谱的解决思路，按顺序试试，大概率能搞定：

切换到游戏页面时，别只靠Vue的组件销毁，主动清理表单的状态并让页面退出编辑模式：

// 在表单页面的beforeUnmount钩子（或切换页面的方法里）执行
const formRef = this.$refs.gameForm;
if (formRef) {
  // 清空所有输入框内容并让它们失去焦点
  Array.from(formRef.querySelectorAll('input, textarea')).forEach(input => {
    input.value = '';
    input.blur();
  });
  // 强制让document失去当前焦点，避免WebKit认为页面还在编辑状态
  document.activeElement?.blur();
}

这个操作相当于告诉WebKit：“之前的输入内容都没了，别再惦记了”。

如果第一种方法不管用，我们可以主动替换掉WebKit的撤销历史：

// 在游戏页面的mounted钩子中执行
const tempInput = document.createElement('input');
// 把临时输入框藏起来，不让用户看见
tempInput.style.cssText = 'position:fixed; opacity:0; pointer-events:none;';
document.body.appendChild(tempInput);

tempInput.focus();
tempInput.value = ' '; // 输入一个空格
tempInput.setSelectionRange(0, 1);
document.execCommand('delete'); // 删除这个空格，把之前的输入历史顶出撤销栈

tempInput.blur();
document.body.removeChild(tempInput);

原理是用一次无意义的编辑操作，覆盖掉之前表单的输入记录，这样摇晃时就没有可撤销的内容了。

如果你的游戏页面完全不需要用户输入，直接给页面加上只读限制：

body {
  -webkit-user-modify: read-only;
  user-modify: read-only;
}

或者给根元素设置contenteditable="false"，这会直接告诉WebKit：“这页面是只读的，别搞编辑相关的操作”。

你之前试的devicemotion没用，是因为iOS Safari会优先处理浏览器层面的摇晃行为。想要拦截的话，得先请求设备运动权限，再阻止默认行为：

// iOS 13+需要先请求权限
if (typeof DeviceMotionEvent.requestPermission === 'function') {
  DeviceMotionEvent.requestPermission().then(permissionState => {
    if (permissionState === 'granted') {
      window.addEventListener('devicemotion', (e) => {
        // 简单判断是否是摇晃动作（阈值可以根据需求调整）
        const { x, y, z } = e.accelerationIncludingGravity;
        if (Math.abs(x) > 15 || Math.abs(y) > 15 || Math.abs(z) > 15) {
          e.preventDefault();
          // 额外触发一次空撤销，抵消浏览器的默认提示
          document.execCommand('undo', false, null);
        }
      }, { passive: false }); // 必须设置passive:false才能调用preventDefault
    }
  });
}

这个方法需要用户授权设备运动权限，适合必须保留输入功能的场景。

优先试试前两个方法，不需要用户授权，体验更顺畅。

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