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

Question

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

Answer 1

当我测试 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
}

}();

这是我得到它的来源： http ://www.thewatchmakerproject.com/blog/how-to-fix-the-broken-ipad-form-label-click-issue

一旦标签起作用，您就可以开始根据需要定义一个区域:)

Answer 2

最后，我们发现在输入字段周围加上标签/for 组合效果很好。虽然在结构上很尴尬，但将标签作为外部结构元素（通过使标签 display:block 替换 div）为我们提供了所需的 hitbox。适用于 iOS 和 android。

Answer 3

如果元素不是输入字段，则使用透明边框围绕可点击元素有效：

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

在这种情况下要小心精灵，因为边框会显示精灵的其他被遮挡的部分。