15

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?

4 Answers 4

29

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;
5
  • 4
    Thank you - this should have been accepted. Was driving me nuts! Oct 23, 2012 at 8:42
  • where should I search for this line?
    – danielrvt
    Nov 9, 2012 at 18:26
  • It would be in your phonegap's www/index.css file smthing like this * { -webkit-user-select: none; } Nov 10, 2012 at 19:22
  • I didn't accept this answer because upgrading from Cordova 1.9.0 to 2.0 fixed the original issue for me, which is what the accepted answer suggested - but maybe it depends what device you're using.
    – DiscDev
    Dec 7, 2012 at 20:44
  • I couldnt able to find this file.. please help Sep 14, 2014 at 17:33
4

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

2
  • Thank you, I can confirm that upgrading to Cordova 2.0 fixed the text input problem on a Nexus 7 running 4.1.1 Jellybean.
    – DiscDev
    Jul 30, 2012 at 21:57
  • Did they happen to say why it was behaving this way on the Nexus 7? I'm experiencing something simular where typing in an textarea through a webview in my activity causes the search bar of my app to populate with the text that is meant for the textarea.
    – Steven
    Aug 13, 2012 at 20:37
3

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.

0

-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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.