如何禁用 iOS 的“摇动撤消”功能在网络应用程序中

Question

我正在为 iPad 构建一款游戏作为网络应用程序。它结合了摇动动作来触发其中一个屏幕的事件，但是，由于它还具有信息收集表单，因此有时摇动动作会触发恼人的“摇动以撤消”对话框。当用户进行摇动操作时，用户输入的表单输入甚至不再存在于 DOM 中，因此在我看来，撤消功能不应该被触发，但不幸的是它确实如此。无法将其包装在本机包装器（PhoneGap 或其他）中，因此我想知道是否有人知道是否可以通过 CSS 或 JavaScript 为特定网页/应用程序禁用此功能？

谢谢。

Answer 1

本博客描述了使用 DeviceMotionEvent 侦听器的非常简单的震动检测：

http://www.jeffreyharrell.com/blog/2010/11/creating-a-shake-event-in-mobile-safari/

尝试以下代码以禁用撤消事件发生：

window.addEventListener('devicemotion', function (e) {
    // This is where you put your code for dealing with the shake event here

    // Stop the default behavior from triggering the undo dialog (hopefully)
    e.preventDefault();
});

有我能想到的另一件事是在完成后将文本输入转换为只读项目。据推测，只读输入字段无法使用撤消功能，尽管我还没有测试过。奇怪的是，即使输入不再是 DOM 的一部分，该功能仍然会触发。

我不确定是否可以通过 CSS 中的 -webkit- 属性来防止摇动操作。以下是 webkit 特定 CSS 属性的列表（可能不包含 100% 可访问的属性）。

http://qooxdoo.org/documentation/general/webkit_css_styles

Answer 2

对于 PhoneGap，我刚刚插入了这一行：
[UIApplication共享应用程序].applicationSupportsShakeToEdit = NO;
在 webViewDidFinishLoad 类中，它对我来说创造了奇迹。

只需转到 MainViewController.m 并将 webViewDidFinishLoad 更改为如下所示：

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];

[UIApplication sharedApplication].applicationSupportsShakeToEdit = NO;

    return [super webViewDidFinishLoad:theWebView];
}

Answer 3

我最近在开发一款游戏时遇到了这个问题，其中用户使用 WebSockets 配对设备。不幸的是，上面提到的解决方案都不起作用。

简而言之，该游戏涉及用户通过手机上的表单订阅频道。一旦订阅，他们就会摇动设备，然后一个场景就会在他们的桌面上播放。问题是，每当有人摇动 iOS 设备时，就会弹出“撤消输入”警报。

这是我针对此问题找到的仅有的两个解决方案。

1. 防止您的输入失去焦点。如果输入是表单的一部分，这将要求您阻止表单提交。您还必须侦听任何锚点上的“touchstart”而不是“单击”，并防止 touchstart 事件传播。这将防止该锚点获得焦点以及您的输入失去焦点。这种方法肯定有一些缺点。

2. 向窗口添加“keydown”事件处理程序并阻止该事件传播。这可以防止任何值插入到 iOS 设备上的输入中。我还必须创建一个将键码映射到正确字符的对象。这是我最终选择的路线，因为我输入的所有内容都是 6 个字符的代码，所以我只需要数字。如果你需要的不仅仅是数字，这可能会很痛苦。按下按键时，通过键码捕获该字符并设置输入的值。这会欺骗 iOS 认为没有任何值通过键盘插入到输入中，因此它无法撤消任何操作。

请记住，阻止 keydown 事件传播并不会阻止在原生 Android 浏览器上进行输入，因此它会正常运行。但这没关系，因为这不是 Android 问题。您可以通过侦听输入本身的输入事件并在收到此事件时删除 keydown 侦听器来防止插入重复值。

var codes = {
  48: 0,
  49: 1,
  50: 2,
  51: 3,
  52: 4,
  53: 5,
  54: 6,
  55: 7,
  56: 8,
  57: 9
},
myInput = document.getElementById("myInput");

var keydownHelper = function (e) {
  e.preventDefault();
  myInput.removeEventListener("input", inputHelper); 

  var val = myInput.value;

  // Delete
  if (e.keyCode === 8 && val.length) {
    myInput.value = val.slice(0, val.length - 1);
    return;
  }

  // If not a number, do nada
  if (typeof codes[e.keyCode] === "undefined") { return; }

  val += codes[e.keyCode];
  myInput.value = val;
};

var inputHelper = function (e) {
  e.preventDefault();
  window.removeEventListener("keydown", keydownHelper);
};

myInput.addEventListener("input", inputHelper);
window.addEventListener("keydown", keydownHelper); 

Answer 4

Objective-C

只需在“- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions”内添加代码行

[application setApplicationSupportsShakeToEdit:NO];

Swift 2.x

添加单个 中的代码行

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -Bool {
    
    application.applicationSupportsShakeToEdit = false
    return true
}

appDelegate.swift didFinishLaunchingWithOptions 方法Swift 3.x

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    
    application.applicationSupportsShakeToEdit = false
    return true
}

Answer 5

也许在您的 DeviceMotionEvent 侦听器中尝试 event.preventDefault(); ？

环顾 Stack Overflow，我可以看到其他人已经成功地使用 CSS 禁用了默认“事件”（奇怪的是）。

防止默认按但不默认拖入iOS MobileSafari？

Answer 6

请参阅：如何停止 UITextField 响应摇动手势？

对于phonegap，请在AppDelegate.m 中的webViewFinishLoad 方法中设置此属性

Answer 7

第一个解决方案

最简单的方法是使用这个插件：

https: //github.com/nleclerc/cordova-plugin-ios-disableshaketoedit

第二种解决方案

如果您不想使用上述插件，那么您应该手动执行此操作打开 MainViewController.m 并将 webViewDidFinishLoad 更改为如下所示：

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];

[UIApplication sharedApplication].applicationSupportsShakeToEdit = NO;

    return [super webViewDidFinishLoad:theWebView];
}

第三种解决方案

这是我设计的另一个解决方案，用于禁用适用于文本输入的“Shake To Undo”。请注意，不允许用户插入表情符号。

<body>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

    <script>
    textArea = document.getElementById("textarea");

    textArea.onkeypress =  function(event){
        event.preventDefault();
        var nationUnicode=event.which;
        var utf8=encodeURIComponent(String.fromCharCode(parseInt(nationUnicode, 10)));
        if  (utf8.search("%EF") != 0) //value is not an Emoji
            textArea.value= textArea.value + String.fromCharCode(nationUnicode);
    }

    textArea.onkeydown = function (event){
        if (event.keyCode == 8){
            event.preventDefault();
            var txtval = textArea.value;
            textArea.value = txtval.slice(0, - 1);
        }   
    }
    </script>
</body>

Answer 8

我找到了一个一致有效的解决方法：您可以将文本输入托管在框架中。完成输入后，从页面中删除框架。这似乎可以解决问题。

function resetIframe() {
  // Remove the old frame
  document.body.removeChild(frame);

  // Create a new frame that has an input internally
  frame = document.createElement('iframe');
  frame.src = '/html-with-input.html';
  frame.style = 'border: 0; height: 30px; width: 200px;'
  document.body.appendChild(frame);

  // When the frame is ready, grab a reference to the input
  frame.addEventListener('load', () => {  
    const input = frame.contentDocument.body.querySelector('input');
    console.log(frame, frame.contentDocument.body)

    // When the input changes, grab the value
    input.addEventListener('input', e => {
      document.getElementById('output').innerText = e.target.value;
    });
  });
}

这是概念证明：https://codepen.io/joshduck/full/RJMYRd/

Answer 9

将输入放入 iframe 中，不需要输入时重新加载 iframe。