Do touch events not work with text-input elements in iPad Safari?

In iPad Safari, I have programmed a DIV's touch-events so that when you touch inside the DIV and hold your finger there for 500 ms, the DIV's background color changes.

When I try to move the code over to a text-input element (inside a fieldset), making it the touch-target instead of the DIV, the code doesn't work. The text-input becomes selected in spite of this CSS:

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

Is there no way to intercept the touch events of a text-input element in iPad Safari and handle them in a custom manner, preventing default behavior? Or is there something additional that I must do to get the input to support this? I've tried with and without a dummy click handler: oncli开发者_如何学编程ck="void(0)".

This is the doc I'm following the documentation Handling Events.

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

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

If you don't call preventDefault() in your handler code, the browser will automatically pass the touch event through to the default implementation (after you think you've handled it). The default implementation is to select the field.

So, in your case, call preventDefault() and stopPropagation() in your handler, and return false. This prevents the event from bubbling further. Then you can totally control your input element.

Caveat: You'll then also lose the default behavior of the input field! In other words, you'll not be able to input text into the field! Or if the input field is a <select>, you won't be able to pull up the list etc.

I suppose what you really want is: 1) If user presses and hold for 500ms, then turn yellow, 2) and/or on release activate the input field. In that case, you'll have to manually refire the event upwards when you really want to use the input field.

This kind of situation is very common when programming the iPad. For example, in many cases you'd want to detect a touch-drag motion (even on an input field) and interpret it as a move, but interpret a touch-release motion (without moving) as a click to activate the input field. You have to do what I suggest above: preventDefault() and refire event when necessary.

Try to disable and make your input readonly:

<input type="text" readonly />