18

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

4

9 回答 9

19

JEdi​​table + 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();
}

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

于 2013-03-12T23:05:33.110 回答
13

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

$('.input').bind('click', function(){
    $(this).focus();
});
于 2012-09-21T22:53:03.197 回答
13

伙计们，这里的其他两个答案对我不起作用，但 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();
}

祝你好运！

于 2013-09-06T00:09:58.660 回答
3

好的，如果您的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

于 2013-01-14T11:46:52.730 回答
3

感谢@Danwilliger 和@jeremytripp 的解决方案。由于这个问题已经知道多年，但仍未在 touch-punch 作者的 Git 存储库中处理，因此我使用此处添加的解决方案对其进行了分叉：

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

我会很高兴作者将这几行更改合并到原始库中并使其不再需要，但是如果这种情况永远不会发生，那么有一个单独的源文件可以参考是很好的。

于 2013-10-07T21:32:51.220 回答
2

Jacob 的回答稍作修改，我发现使用该click事件会导致 iPad、ios9 Safari 上的行为不一致。有时我会在一个场地上按一次，它会聚焦，有时我必须按三下。更改click为touchstart我解决了这个问题（我也使用了事件委托，因为我的表单是动态添加的）：

$('form').on('touchstart', 'input,textarea',function(){
    $(this).focus();
});
于 2016-05-18T17:04:18.080 回答
1

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

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

    $("#sortableList").sortable({

    handle: ".move"

    });
于 2016-12-11T15:00:47.603 回答
0

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

    $('input,textarea').bind('click', function(){
    $(this).focus();
});
于 2017-08-02T02:53:25.683 回答
0

实际上，我尝试添加 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();
}

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

于 2015-08-11T02:12:09.490 回答