Question

它花了我一点点，但我发现我无法点击我的输入，因为我正在使用touch.punch脚本在触摸设备上启用jquery UI拖动功能。熟悉这个脚本的人知道为什么会这样吗？表单实际上位于父对象的树下。有没有人知道我可以覆盖或强制选择的方式？我将尝试绑定事件，立即强制关注输入，但也许有人在这里有一些见解？

Answer 1

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

我花了一整天时间来解决这个问题，最后我找到了解决方案。解决方案与kidwon的答案非常相似。但是，我使用的是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字段的本机功能。

Answer 2

伙计们，这里的另外两个答案对我不起作用，但Danwilliger的解决方案有效;然而，从他的回答中不清楚如何在Touch Punch JS文件中设置它。对于未来的求职者，这里是做什么的。再一次，这是Danwilliger的解决方案 - 我只是澄清一下。

在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();
}

祝你好运！

Answer 3

对于任何可能使用非常方便的touch.punch黑客攻击类似情况的人，只需强制关注点击事件就可以了！

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

Answer 4

好的，这是另一个解决方案，如果你的textfield任何HTML元素没有聚焦，滚动，选择单词，在文本周围移动文本光标以及可能出现的任何不同场景，那么你可以覆盖 jquery。 ui.touch.punch.js 脚本。我假设你的元素不是可拖动的元素，但可能就像我的情况一样。

在html元素上添加一个类，例如class="useDefault"。然后转到脚本文件并找到该部分：

...
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 覆盖浏览器的默认行为。要防止我们的特定类节点，请进行以下修改：

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

Answer 5

感谢@Danwilliger和@jeremytripp的解决方案。因为这个问题多年来一直为人所知，但仍然没有被设计成触摸式作者的Git回购，我将这个问题分解为：

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

我很高兴作者将这几行更改合并到原始库中，然后不需要这个，但如果这种情况从未发生过，那么引用一个源文件会很好。

Answer 6

雅各布的回答稍作修改 - 我发现使用click事件导致iPad，ios9 Safari的行为不一致。有时我会在一个场地上按一下它会集中注意力，有时我不得不按三次。将click更改为touchstart解决了我的问题（我也使用了事件委派，因为我的表单是动态添加的）：

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

Answer 7

我实际上尝试添加Danwilliger提到的那些线条，但它并没有为我做到这一点。

对我有用的是

//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();
}

我不确定为什么发布的其他答案不起作用，但对于其他任何人如果他们有同样的问题尝试我的解决方案:)。

Answer 8

一种解决方案是使用手柄。在里面添加一个图标并使用它来拖动。然后输入工作正常。

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

    $("#sortableList").sortable({

    handle: ".move"

    });

Answer 9

Throttlehead的解决方案对我有用。更简单的可能只是使用JQuery选择器来覆盖所有输入和textareas：

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

jquery.ui.touch.punch.js脚本阻止了触摸设备上的输入功能

9 个答案: