增加移動設備上的可觸摸區域（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

最後，我們發現圍繞輸入字段的標籤/組合效果很好。儘管結構上很笨拙，但將標籤作爲外部結構元素（通過使標籤顯示來替換div：塊）爲我們提供了我們需要的hitbox。適用於iOS和Android。

Answer 3

使用透明邊框包圍的可點擊的元素的作品，如果該元素是其他東西比輸入字段：

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

要小心，對於這種情況下的精靈，因爲邊界框會顯示否則模糊的部分的精靈。