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

Question

我花了一点时间，但我发现我无法点击我的输入，因为我正在使用 touch.punch 脚本在触摸设备上启用 jquery UI 拖动功能。熟悉此脚本的任何人都知道为什么会这样？表单实际上驻留在父对象的树中。有谁知道我可以覆盖或强制选择的方法吗？我现在将尝试绑定事件，强制将焦点放在输入上，但也许这里有人有一些见解？

Answer 1

JEditable + jQuery UI 可排序 + 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();
}

我认为这是一个更好的解决方案，因为它始终对任何输入或文本区域字段使用本机功能。

Answer 2

对于使用非常方便的 touch.punch hack 可能会遇到类似情况的任何人，只需将焦点强制通过点击事件就可以了！

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

Answer 3

这里的其他两个答案对我不起作用，但 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 4

OK 这是另一个解决方案，如果您的

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 提供的解决方案。由于这个问题已经为人所知多年，但仍未在 touch-punch 作者的 Git 存储库中得到解决，我将其与此处添加的解决方案进行了分叉：

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

我会很高兴作者将这几行更改合并到原始库中，然后不再需要这个，但如果那从未发生过，那么有一个单一的源文件可供参考是很好的。

Answer 6

Jacob 的回答稍作修改——我发现使用

click

事件会导致 iPad、ios9 Safari 上的行为不一致。有时我会在一个字段上按一次它会聚焦，其他时候我必须按三下。将

click

更改为

touchstart

解决了我的问题（我也使用了事件委托，因为我的表单是动态添加的）：

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

Answer 7

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

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

    $("#sortableList").sortable({

    handle: ".move"

    });

Answer 8

我实际上尝试添加 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 9

Throttlehead 的解决方案对我有用。也许更简单的是只使用 JQuery 选择器来覆盖所有输入和文本区域：

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