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

ラベルが機能したら、必要に応じて領域の定義を開始できます:)