Can't edit input type="text" or textarea with Cordova 1.9.0 and Android Jelly Bean

I just got my shiny new Nexus 7 and was playing around with Cordova (Phonegap). I created a simple page with a couple of text input fields and a text area. On my iPhone I can click the text fields and the keyboard comes up and I can edit the text. On my Nexus 7 running 4.1.1 Jelly Bean with Cordova 1.9.0, the keyboard comes up but when you type nothing shows up in the text field or text area.

I'm pretty sure my code is fine since it works on the iPhone and Android 2.3.5, but here is the snippet in question just in case:

  <body onload="onBodyLoad()">
  <div data-role="page" id="mainpage"> 
      <div data-role="header" data-theme="a"> 
          <h2>Lightweight</h2>
      </div>

      <div data-role="content">
        <div>
          <a href="#" data-role="button" data-icon="check" data-iconpos="bottom" data-theme="b" onClick=onClickInterrogate()>Interrogate</a>
        </div>

          <div align="center">
              <a href="#" data-role="button" data-inline="true" data-icon="forward" data-theme="b" onClick=downloadFile()>Send</a>
              <a href="#" data-role="button" data-inline="true" data-icon="gear" data-iconpos="right" data-theme="b" onClick=onClickSettings()>Settings</a>
          </div>

          <div align="center">
              <label for="serverUrl">Server URL:</label>
              <input type="text" name="name" id="serverUrl" value="urlGoesHere"/>
              <label for="zipFile">Zip File:</label>
              <input type="text" name="name" id="zipFile" value="tran1.zip"/>
          </div>
            <div data-role="fieldcontain">
                <label for="textarea">Textarea:</label>
                <textarea name="textarea" id="textarea">urlGoesHere</textarea>
            </div>
    </div>
      <div data-role="footer"> 
          <h1> &copy; 2012 Company Name </h1>
      </div>
  </div>   

I just tried this on Android 2.3.5 and it works fine. Anyone experienced something similar?

Answers


The issue persists in 2.1.0 as well.

Here's how I got it fixed.

Remove the following CSS rule and you can type happily in the input elements.

-webkit-user-select: none;

Phonegap just released 2.0. It has fixed the issue with the keyboard.


I must use my application with browser too and there is the same problem. It's possible fix this on textarea only:

*{
    -webkit-touch-callout: none;
    -webkit-user-select: none; 
}
textarea
{
    -webkit-user-select: auto !important;
}

it works with jquery mobile too.


-webkit-user-select: none; that did the trick for me. I was completely lost for couple of hours trying variations of input field parameters, nothing else worked. (phonegap 2.5.0 / android 4.1.1)


Need Your Help

run puppeteer on already installed chrome on macos

google-chrome puppeteer

1.How can I run the Puppeteer script on the already installed chrome in mac machine. I tried with the following script, not able to run.

Windows - Commit Size vs Virtual Size

windows memory virtual-memory

i would like to know the exact difference between Commit Size (visible in the Task Manager) and Virtual Size (visible in SysInternals' Process Explorer).