使用 Javascript 专注于移动设备的触摸映射和输入答案

【问题标题】：Touch mapping and input focusing on mobile with Javascript使用 Javascript 专注于移动设备的触摸映射和输入
【发布时间】：2011-10-25 17:32:52
【问题描述】：

我最近在我的一个页面中添加了一个 js 触摸映射功能（在 stackoverflow 中的某个地方找到），这样我就可以让我的 Jquery 可拖动对象在 iOS Safari 上工作（如果没有这个映射，拖放将无法工作，因为据我所知）

这是函数：

function touchHandler(event)
{
var touches = event.changedTouches,
    first = touches[0],
    type = "";

     switch(event.type)
{
    case "touchstart": type = "mousedown"; break;
    case "touchmove":  type="mousemove"; break;        
    case "touchend":   type="mouseup"; break;
    default: return;
}
altKey, shiftKey, metaKey, button, relatedTarget);

var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
                          first.screenX, first.screenY,
                          first.clientX, first.clientY, false,
                          false, false, false, 0, null);

first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}

一切都很好......除了当我关注输入或文本区域（特别是 Facebook cmets 插件）并且 iOS 键盘出现时。

在我输入文本并单击输入上方的“发送”按钮后，该函数为模拟的鼠标事件提供了错误的 Y 坐标（我相信这是因为键盘改变了页面的高度），我最终点击了某个地方在那个按钮上方。

输入模糊，但发送按钮没有被点击。好像这还不够可悲，页面上的另一个按钮（发送按钮上方的一些像素）被点击并链接到另一个页面。

我认为当输入成为焦点时我可以禁用映射，但似乎根本无法访问那些 Facebook cmets 插件元素。

感谢任何帮助，我已经解决这个问题好几天了......

【问题讨论】：

标签： javascript html ios events touch

【解决方案1】：

你有没有使用 UIview 来在键盘显示时将你的内容向上推？

    - (void)textFieldDidEndEditing:(UITextField *)textField {   
        [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationBeginsFromCurrentState:YES];
        textfield.frame = CGRectMake(textfield.frame.origin.x, (textfield.frame.origin.y + 100.0), textfield.frame.size.width, textfield.frame.size.height);
    [UIView commitAnimations];
    }

现在它从原点移动了 100 倍，如果您的元素需要，您可以更改它。完成输入文本后，您还必须添加代码以从视图中移除键盘。

        - (void)textFieldDidEndEditing:(UITextField *)textField {   
            [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationDelegate:self];
        [UIView setAnimationDuration:0.5];
        [UIView setAnimationBeginsFromCurrentState:YES];
textfield.frame = CGRectMake(textfield.frame.origin.x, (textfield.frame.origin.y + 100.0), textfield.frame.size.width, textfield.frame.size.height);
        [UIView commitAnimations];

}

【讨论】：