Jquery.ui.touch.punch.js script предотвращает входные функции на сенсорных устройствах

Ответ 1

Для всех, кто может оказаться здесь с аналогичной ситуацией, используя очень удобный штрих-код touch.punch, просто принудительное фокусирование на событии клика будет работать просто отлично!

$('.input').bind('click', function(){
    $(this).focus();
});

Ответ 2

JEditable + jQuery UI Sortable + jquery.ui.touch-punch

Я потратил весь день на эту проблему, и я, наконец, понял решение. Решение очень похоже на ответ на ответ. Однако я использовал jeditable, который динамически создает поля ввода без имен классов. Поэтому я использовал эту условную инструкцию вместо проверки имени класса:

//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
  event.stopPropagation();
} else {
  event.preventDefault();
}

Я думаю, что это лучшее решение, поскольку оно всегда использует встроенную функциональность для любых полей ввода или textarea.

Ответ 3

Люди, остальные два ответа здесь НЕ работали для меня, но решение Danwilliger работает; однако из его ответа неясно, как именно настроить его в файле JS Touch Punch. Для будущих ответчиков, вот что делать. Опять же, это решение Дэнвиллигера - я просто уточняю.

Измените этот раздел в jquery.ui.touch-punch.js(примерно на строке 30):

function simulateMouseEvent (event, simulatedType) {

// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
  return;
}

event.preventDefault();

var touch = event.originalEvent.changedTouches[0],
    simulatedEvent = document.createEvent('MouseEvents');

Для этого:

function simulateMouseEvent (event, simulatedType) {

// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
  return;
}
var touch = event.originalEvent.changedTouches[0],
    simulatedEvent = document.createEvent('MouseEvents');

//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
    event.stopPropagation();
} else {
    event.preventDefault();
}

Удачи!

Ответ 4

ОК, другое решение, если ваш textfield любой элемент HTML не фокусируется, прокручивается, выбирает слова, перемещает текстовый курсор вокруг текста и любые другие сценарии, которые могут возникнуть, тогда вы можете переопределить jquery.ui. touch.punch.js script. Я предполагаю, что ваш элемент не является перетаскиваемым, но, возможно, его дочерним элементом, как и мой случай.

Поместите класс в свой элемент html, например class="useDefault". Затем перейдите в файл script и найдите ту часть:

...
function simulateMouseEvent (event, simulatedType) {

    // Ignore multi-touch events
    if (event.originalEvent.touches.length > 1) {
      return;
    }

    event.preventDefault();

    var touch = event.originalEvent.changedTouches[0],
        simulatedEvent = document.createEvent('MouseEvents');
....

Как вы можете видеть, event.preventDefault(); уверяет, что jquery.ui.touch.punch.js переопределяет поведение браузера по умолчанию. Чтобы предотвратить это для нашего класса node, внесите следующие изменения:

if (event.originalEvent.touches.length > 1) {
  return;
}
var touch = event.originalEvent.changedTouches[0],
  simulatedEvent = document.createEvent('MouseEvents');
//As you can see here is your class element check
if (touch.target.className === "useDefault") {
  event.stopPropagation();
} else {
  event.preventDefault();
}

Это решение протестировано только с браузерами webkit и выпуском jQuery UI Touch Punch 0.2.2.

Надеемся, что быстрое решение поможет, BR

Ответ 5

Благодаря @Danwilliger и @jeremytripp для решения. Поскольку эта проблема известна годами, но до сих пор не была обработана авторепортером Git repo, я разветкил его с добавленным здесь решением:

https://github.com/copernicus365/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js

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

Ответ 6

Ответ Джейкоба работал с небольшой модификацией - я обнаружил, что использование события click привело к непоследовательному поведению на iPad, Safari ios9. Иногда я нажимал один раз на поле, и он фокусировался, в других случаях мне приходилось три раза нажать. Изменение click на touchstart решило проблему для меня (я также использовал делегирование событий, так как моя форма была добавлена ​​динамически):

$('form').on('touchstart', 'input,textarea',function(){
    $(this).focus();
});

Ответ 7

Я на самом деле попытался добавить строки, которые Данвиллигер упомянул, это не помогло мне.

Что сработало для меня, было

//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
  event.stopPropagation();
  $(touch.target).focus();
} else {
  event.preventDefault();
}

Я не уверен, почему другие ответы не были опубликованы, но для кого-то еще, если у них есть такая же проблема, попробуйте мое решение:).

Ответ 8

Одним из решений является использование дескриптора. Добавьте значок внутри и используйте его для перетаскивания. Тогда входы работают нормально.

<li><span class="move">Move</span><input...../></li>

    $("#sortableList").sortable({

    handle: ".move"

    });

Ответ 9

Решение для дроссельной заслонки работало для меня. Проще, возможно, просто использовать селектора JQuery для покрытия всех входов и текстовых областей:

    $('input,textarea').bind('click', function(){
    $(this).focus();
});