如何在webapp中禁用iOS"Shake to Undo"

Question

我正在构建一个游戏作为iPad的webapp.它结合了一个摇动动作来触发其中一个屏幕的事件,但是,由于它还有一个信息收集表单,有时摇动动作会触发恼人的"摇动撤消"对话框.当用户到达摇动动作时,用户输入的表单输入甚至不再存在于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 sharedApplication] .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);