Menu
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> © 2012 Company Name </h1>
</div>
</div>
I just tried this on Android 2.3.5 and it works fine. Anyone experienced something similar?
836
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.
4
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.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
