Html 增加移动设备上的可触摸区域（webkit）

我真的在这里寻找灵感。我需要做的是增加输入字段周围的可触摸区域，这样在输入字段周围模棱两可的点击将导致焦点被赋予该字段。目前，我的重点是使用touchend事件来确定用户的触摸是否与输入字段周围的边界框相交。计算结果很好，但mobilewebkit根本没有响应el.focus（）方法。有没有人对如何更简单地解决移动webkit的焦点问题有什么想法。谢谢。

我在测试Ipod/Ipad/Iphone复选框的点击时，手机标签有问题。我通过应用此脚本解决了以下问题：

    var iPadLabels = function () {

function fix() {
var labels = document.getElementsByTagName('label'),
target_id,
el;
for (var i = 0; labels[i]; i++) {
if (labels[i].getAttribute('for')) {
labels[i].onclick = labelClick;
}
}
};

function labelClick() {
el = document.getElementById(this.getAttribute('for'));
if (['radio', 'checkbox'].indexOf(el.getAttribute('type')) != -1) {
el.setAttribute('selected', !el.getAttribute('selected'));
} else {
el.focus();
}
};

return {
fix: fix
}

}();

这是我得到它的来源：

---

一旦标签起作用，您就可以开始定义一个您想要的区域：）

最后，我们发现在输入字段周围有一个标签/for组合非常有效。尽管在结构上很笨拙，但将标签作为外部结构元素（通过将标签显示为：block来替换div）为我们提供了所需的hitbox。适用于iOS和android。

如果可单击元素不是输入字段，则使用透明边框包围该元素：

a.foo { border: 7px solid transparent; }

在这种情况下，请小心精灵，因为边框框将显示精灵的其他模糊部分