jquery.ui.touch.punch.js script is preventing input functionality on touch devices

Question

It took me a little bit, but I figured out that I can\'t click on my inputs because of the touch.punch script I\'m using to enable jquery UI drag functionality on touch devices.

Answer 1

OK here's another solution if your textfield whatever HTML element is ain't focusing,scrolling, selecting words, moving text cursor around the text and whatever different scenarios might come then you may override the jquery.ui.touch.punch.js script. I assume that your element isn't the draggable one but probably a child of it as my case was.

Put a class on your html element, for example class="useDefault". Then go to the script file and find that part:

...
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');
....

As you can probably see event.preventDefault(); assures that jquery.ui.touch.punch.js overrides the default behaviors of the browser. To prevent that for our particular class node, make the following modifications:

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

This solution is tested with webkit browsers only and jQuery UI Touch Punch 0.2.2 release.

Hope that quick solution helps, BR

Answer 2

Jacob's answer worked with a slight modification—I found that using the click event resulted in inconsistent behavior on iPad, ios9 Safari. Sometimes I'd press once on a field and it would focus, other times I had to press three times. Changing click to touchstart solved the problem for me (I also used event delegation since my form was added dynamically):

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

Answer 3

Thanks to @Danwilliger and @jeremytripp for the solution. Being that this issue has been known for years and yet has still not been worked into touch-punch author's Git repo, I forked it with the solution added here:

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

I would be quite happy for the author to incorporate those few lines of a change into the original library and make this one unneeded then, but if that never happens, it's nice to have a single source file to reference.

Answer 4

To anyone who might wind up here with a similar situation using the very handy touch.punch hack, simply forcing the focus through on a click event will work just fine!

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

Answer 5

One solution is to use a handle. Add an icon inside and use this to drag. Then the inputs work fine.

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

    $("#sortableList").sortable({

    handle: ".move"

    });

Answer 6

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

I have spent all day on this problem and I finally figured out the solution. The solution is very similar to kidwon's answer. However, I was using jeditable which dynamically creates input fields without class names. So I used this conditional statement instead of checking the class name:

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

I think this is a better solution as it always uses the native functionality for any input or textarea fields.