Увеличение сенсорной области на мобильных устройствах (webkit)

Question

Я действительно ищу идеи здесь. Что мне нужно сделать, так это увеличить сенсорную область вокруг поля ввода, поэтому неоднозначный щелчок вокруг поля ввода приведет к фокусировке на этом поле. В настоящее время я фокусируюсь на использовании события touchend, чтобы определить, пересекает ли касание пользователя ограничивающий прямоугольник вокруг поля ввода. Математика работает хорошо, но мобильный webkit не отвечает на метод el.focus () вообще. У кого-нибудь есть идеи, как сделать это проще или обходные пути для решения проблем фокуса мобильного webkit. Спасибо.

Answer 1

В конце концов, мы обнаружили, что окружение поля ввода меткой / для комбо работало отлично.Хотя структурно неудобно, создание метки внешним структурным элементом (замена div созданием метки display: block) дало нам хитбоксы, которые нам были нужны.Работает на iOS и Android.

Answer 2

У меня была проблема с ярлыком для мобильного телефона, когда я проверял щелчок некоторых флажков для 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 3

Использование прозрачной границы для окружения интерактивного элемента работает, если элемент является чем-то отличным от поля ввода:

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

В этом случае будьте осторожны со спрайтами, потому что в рамке будет показана скрытая часть спрайта.