jquery.ui.touch.punch.js script is preventing inpu

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. Anyone familiar with this script know why that might be? The form actually resides down the tree of the parent object. Does anyone know a way I can override or force through the selection? I'm going to try binding events that force focus to the input right now but maybe someone here has some insight?

Answer 1

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 2

Folks, the other two answers here did NOT work for me, but Danwilliger's solution works; however, it's not clear from his answer how exactly to set it up in the Touch Punch JS file. For future answer-seekers, here's what to do. Again, this is Danwilliger's solution -- I'm just clarifying.

Change this section in jquery.ui.touch-punch.js (on approximately line 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');

To this:

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

Best of luck!

Answer 3

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 4

Throttlehead's solution worked for me. Simpler perhaps to just use the JQuery selectors to cover all inputs and textareas:

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

Answer 5

I actually tried adding the lines which Danwilliger mentioned, it did not do the trick for me.

What worked for me was

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

I am not really sure why the other answers posted did not work, but for anyone else out there if they have the same issue try my solution out :).

Answer 6

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"

    });