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