防止输入字段上的点击事件

Question

I am developing a PhoneGap-App for iPad. On one screen you have to fill out a form with about 20 textfields. As input-fields only react to the click-event (which have this not long but yet annoying delay) I tried the following:

$('input[type="text"], input[type=number], input[type=date], input[type="tel"], input[type=password], input[type="email"], input[type="url"], textarea, select').live("touchend", function(e) {
    if(!swipe) {
        $(this).focus();
    }
    swipe = false;
    return false;
});

(I check for swipe in the touchmove event)

This works, but now I want to prevent the original click event on the inputs. The problem is, when I activate an input-field with the .focus() method, the keyboard pops up and slides the page a little bit up AND then the click event gets fired and activates another input-field a little bit below my desired input.

For preventing click I already tried:

$('input[type="text"], input[type=number], input[type=date], input[type="tel"], input[type=password], input[type="email"], input[type="url"], textarea, select').live("click", function(e) {
    return false;
});

but this also doesn't work :(

Is there another trick to activate input-fields immediately after I touched it without any delay?

Answer 1

you can try this

 $('input, textarea, select').click(function(event) {
    event.preventDefault();
 });

Answer 2

You need to use preventDefault to prevent the default action:

  $('input[type="text"], input[type=number], input[type=date], input[type="tel"], input[type=password], input[type="email"], input[type="url"], textarea, select').live("click", function(e) {
        e.preventDefault();
    });

Documentation : http://api.jquery.com/event.preventDefault/

Answer 3

It is stop propagation.

$('input[type="text"], input[type=number], input[type=date], input[type="tel"], input[type=password], input[type="email"], input[type="url"], textarea, select').live("click", function(event) {
        event.stopPropagation();
    });

Answer 4

I had this same issue as you and tried to implement all of the other solutions posted and found that none of them completely worked for me. Instead, I borrowed ideas from all of the prior solutions and found that this snippet of code solved my problem.

    $('input, textarea, select').click(function (event) {
        event.stopPropagation();
    });