Text Boxes are not editable on iPad

[csergent45]

When referencing jquery-ui-touch-punch, my textboxes can not be edited when I touch them on iPad4 or iPhone5.

I am currently using jquery-1.9.1.js and jquery-ui-1.10.3.js.

[ngocnt1]

try to update some code lines in jquery-ui-touch-punch.js

Original code: mouseProto._touchStart = function (event) {

var self = this;

// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
  return;
}

Updated code: mouseProto._touchStart = function (event) {

var self = this;

// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName==='textarea' || event.originalEvent.target.localName==='input') {
  return;
}

it worked for me

[csergent45]

I tried it, but I can no longer drag the draggable interface that the textboxes display on.

On Thu, Mar 27, 2014 at 2:19 AM, ngocnt1 [email protected] wrote:

try to update some code lines in jquery-ui-touch-punch.js

Original code: mouseProto._touchStart = function (event) {

var self = this;

// Ignore the event if another widget is already being handled if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) { return; }

Updated code: mouseProto._touchStart = function (event) {

var self = this;

// Ignore the event if another widget is already being handled if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName==='textarea' || || event.originalEvent.target.localName==='input') { return; }

it worked for me

Reply to this email directly or view it on GitHubhttps://github.com/furf/jquery-ui-touch-punch/issues/142#issuecomment-38775027 .

[ngocnt1]

Below is full code , it is tested on iPad safari and Nexus 7 chrome

/**

• Handle the jQuery UI widget's touchstart events

• @param {Object} event The widget element's touchstart event */ mouseProto._touchStart = function (event) {

  var self = this; if (event.originalEvent.target.localName == 'textarea' || event.originalEvent.target.localName == 'input') { return true; } // Ignore the event if another widget is already being handled if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) { return; }

  // Set the flag to prevent other widgets from inheriting the touch event touchHandled = true;

  // Track movement to determine if interaction was a click self._touchMoved = false;

  // Simulate the mouseover event simulateMouseEvent(event, 'mouseover');

  // Simulate the mousemove event simulateMouseEvent(event, 'mousemove');

  // Simulate the mousedown event simulateMouseEvent(event, 'mousedown'); };

[ngocnt1]

for Surface RT IE11: you should add the below code line

$("#draggable").css('-ms-touch-action', 'none');

[tony873004]

Thank you, ngocnt1. That solved the problem!!

[michelem09]

This worked for me too, just added:

if (event.originalEvent.target.localName == 'textarea' || event.originalEvent.target.localName == 'input') {
      return true;
}

I think this should be placed inside the original code. Can you push a merge request? It could be useful for new users.

Thanks anyway!

[ngocnt1]

ok, i will make a request for merging

Sent from my Windows Phone

---

From: Michele Marcuccimailto:[email protected] Sent: ‎17/‎06/‎2014 13:59 To: furf/jquery-ui-touch-punchmailto:[email protected] Cc: ngocnt1mailto:[email protected] Subject: Re: [jquery-ui-touch-punch] Text Boxes are not editable on iPad (#142)

This worked for me too, just added:

if (event.originalEvent.target.localName == 'textarea' || event.originalEvent.target.localName == 'input') {
      return true;
}

I think this should be placed inside the original code. Can you push a merge request? It could be useful for new users.

Thanks anyway!

---

Reply to this email directly or view it on GitHub: https://github.com/furf/jquery-ui-touch-punch/issues/142#issuecomment-46273409

[deepakshrma]

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

[ubill]

Thanks @deepakshrma , in addition, you might also want to add

|| $(event.target).is("button")

to the end of that list. Otherwise buttons inside draggable divs can't be tapped.

[deepakshrma]

@ubill hahahhah! :-D it was not in my case. Thanks anyways :-) :+1: