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 combo的效果很好。虽然结构很笨拙，但使标签成为一个外部结构元素（通过制作标签显示替换div：block）给了我们所需的hitbox。适用于iOS和Android。

Answer 3

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

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

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

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

3 个答案: