Are touch events with text input elements triggered in iPad Safari?

Question

I programmed DIV touch events on iPad Safari so that when you touch inside the DIV and hold it there for 500ms, the background color of the DIV changes.

When I try to move the code to a text input element (inside a set of fields), making it a touch target instead of a DIV, the code does not work. Text input becomes selected despite this CSS:

    input[type=text] {-webkit-touch-callout:none; -webkit-user-select:none }

Is there no way to capture the touch events of a text input element in iPad Safari and handle them in a non-standard way, preventing the default behavior? Or should I do something else to get support? I tried with and without a dummy click handler: onclick = "void (0)".

This is the document I am following the Event Handling documentation .

Answer 1

It would be helpful if you posted your code, but I think you probably just need to prevent the default behavior on touch events. It looks something like this if you are using jQuery:

$("#ID")
        .bind("touchstart",
            function (e) {
                e.preventDefault();
                //do something
            })
        .bind("touchmove",
            function (e) {
                if (e.preventDefault) { 
                    e.preventDefault();
                }
                //do something
            });

Answer 2

Try disabling and making your input read-only:

<input type="text" readonly />

Answer 3

preventDefault() , ( , , ). - .

, preventDefault() stopPropagation() false. . .

: ! , ! , <select>, ..

, : 1) 500 , , 2) / . , .

This situation is very common when programming an iPad. For example, in many cases you need to detect a touch movement (even in the input field) and interpret it as a movement, but to interpret the movement of the touch release (without movement) as a click in order to activate the input field, you must do what I suggest above: preventDefault()and update the event if necessary.