Question

I’m pretty new to Phonegap. I have a problem where the default css used in a clean Phonegap project won’t allow input into text fields. I narrowed it down to one line of CSS:

* {
            -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
            -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
            -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
            -webkit-user-select: none;                 /* prevent copy paste, to allow, change 'none' to 'text' */

    }

The problem line is:

-webkit-user-select: none; 

This can be found in www/index.css.

Seems like completely disabling the input field isn’t the desired effect.

I’ve also posted this problem 2 times before but it was closed, not sure why… My issue was closed due to not being a common problem. Well, all I can say about that is, I guess some users at stackoverflow don’t think CSS 3, Phonegap, HTML 5, and -webkit-user-select: is a common situation. I’d beg to differ.

However I can see this issue also posted here, also causing problems in Safari: User select:none causes input field to be inaccessible on Safari Although slightly different.

My current solution is this:

-webkit-user-select: text; /* change 'none' to 'text' */

Just still curious as to what is the most elegant solution to enable the text input, but still maintain some of this copy and past functionality that Phonegap is trying to achieve. Thanks!

Answer 1

Try adding this to your css:

input {
    -webkit-user-select: auto !important;
}

This will override the text selection disabling that you have set on every single element (via the * selector) for input fields.