CODEWITHSUNDEEP
ipadjquery-uiinputtouchjquery-ui-sortable
Marcos Lima
Marcos Lima

Reputation: 771

Text input inside jQuery UI sortable doesn't work on touch devices

I made a simple page with some divs being sortable by the jQuery UI Sortable, with a little help from Touch Punch to get it working on an iPad running iOS 7.1.2.

Inside each of these divs, I included a text input tag. On desktop browsers the inputs work fine, but the iPad doesn't recognize the click on the input component. The keyboard isn't launched and I can't type into it. Any lights?

My page is here: https://www.dropbox.com/s/5crp55r9jw98var/sortableTest.zip?dl=0

Upvotes: 0

Views: 1312

Answers (3)

devonj
devonj

Reputation: 1238

I know this is an old question but got the following to work for me without modifying the JS files:

let detectTap = false;

$('body').on('touchstart', '#sortableMenu input', () => {
  detectTap = true;
});
$('body').on('touchmove', '#sortableMenu input', () => {
  detectTap = false;
});
$('body').on('touchend', '#sortableMenu input', (e) => {
  if (detectTap) $(e.target).focus();
});

Basically just adding a tap listener on the inputs, and when it gets the tap, focus on that input.

Upvotes: 1

xdeepakv
xdeepakv

Reputation: 8135

Change in jquery.ui.touch-punch.js worked for me. JS: jquery.ui.touch-punch.js Method to modify:

//line: 31    
function simulateMouseEvent(event, simulatedType) {
 //...
}


//changes to add ++
if ($(event.target).is("input") || $(event.target).is("textarea")) {
    return;
} else {
    event.preventDefault();
}

Upvotes: 1

Marcos Lima
Marcos Lima

Reputation: 771

Well, here's what worked for me.

I edited the jquery.js. On jQuery.Event.prototype, inside the preventDefault function, there is:

if ( e.preventDefault ) {
    e.preventDefault();
} else {
    e.returnValue = false;
}

Basically, I changed the if condition to e.preventDefault && e.target.tagName != "INPUT". It solved the example, but in the real life I needed to add some more conditions to ensure that other input fields won't get caught by this.

Upvotes: 1

Related Questions