I have a strange problem in my PhoneGap-based android app. On certain screens, the
number 9 key is completely ignored. This happens on all my Android
2.X devices. I have tried with previous versions of PG and found that
the problem first occurred in v1.2.
Here is the code to a sample index.html file that should reproduce the issue. On both Android 2.2 and 2.3, the text boxes labeled as "broken" do not accept the number 9 as input.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
body
{
margin:0;
padding:0;
font-size:20px;
}
input
{
height:20px;
}
#container_second
{
overflow:hidden;
position:relative;
width:100%;
height:150px;
}
#container_second div
{
left: -2000px;
position: absolute;
-webkit-transform: matrix(1, 0, 0, 1, 2000, 0);
}
</style>
</head>
<body>
<br />
<div id="container_first">
<div>
Working Text: <br /><input type="text" /><br /><br />
Working Tel: <br /><input type="tel" />
</div>
</div>
<br /><br />
<div id="container_second">
<div>
Broken Text: <br /><input type="text" /><br /><br />
Broken Tel: <br /><input type="tel" />
</div>
</div>
</body>
</html>
It might be related to this issue. For some reason PhoneGap is calling setNavDump on the web view's WebSettings. setNavDump is an obsolete method according to the android docs so you should be fine if you disable it.
One way to do it is by overriding the init method in your class that extends DroidGap
#Override
public void init() {
super.init();
this.appView.getSettings().setNavDump(false);
}
If that doesn't work, try adding it after the loadUrl call in the existing onCreate method:
#Override
public void onCreate(Bundle savedInstanceState) {
//... snip ...
super.loadUrl("file:///android_asset/www/index.html", 12000);
this.appView.getSettings().setNavDump(false);
//... snip ...
}
I had the same issue. Turns out that you need to specify the Android SDK version via the API number in the config.xml file
add:
<preference name="android-minSdkVersion" value="8" />
I have developed a phonegap application in eclipse(for android). I had the same problem. When i pressed on 7, the application stopped and when i press on 9, the application do nothing in the text area components. It was also a problem appears on android versions 2.2 & 2.3.3. In the layout, there were a structure such as frame->frame->linear layout. And then i removed both of the frames. I just used linear layout and then the problem solved. I can press on 7 & 9 and there is no problem in the application. I mean, you should check for the unused layout components.
Related
I have a nodogsplash version 0.9_beta9.9.9 installed on OpenWRT 15.05.01 device and they work well when I'm using the browser (mozzila, chrome) to access the captive portal and after click to 'Continue' they redirect me to pre-setting page.
This is my code:
`<!DOCTYPE html>
<html>
<head>
<!--
A client is authenticated by requesting the page $authtarget.
So, href to it here, with an img or link text the user can click on
Alternatively submit an HTTP form method=get, passing $authaction,
Also, note that any images you reference must reside in the
subdirectory that is the value of $imagesdir (default: "images").
Available variables:
error_msg: $error_msg
gatewayname: $gatewayname
tok: $tok
redir: $redir
authaction: $authaction
denyaction: $denyaction
authtarget: $authtarget
clientip: $clientip
clientmac: $clientmac
gatewaymac: $gatewaymac
nclients: $nclients
maxclients: $maxclients
uptime: $uptime
imagesdir: $imagesdir
pagesdir: $pagesdir
Additional Variables that can also be passed back via HTTP get.
Or just append them to the authentication link:
nodoguser
nodogpass
info
voucher
-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalida
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='shortcut icon' href='$imagesdir/splash.jpg' type='image/x-icon'
<title>$gatewayname Entry</title>
<style>
body
{
background-color:lightgrey;
color:black;
margin-left: 5%;
margin-right: 5%;
text-align: left;
}
img
{
width: 40%;
max-width: 180px;
margin-left: 0%;
margin-right: 5%;
}
input[type=submit]
{
color:black;
margin-left: 0%;
margin-right: 5%;
text-align:left;
font-size: 1.0em;
line-height: 2.5em;
font-weight: bold;
border: 1px solid;
}
</style>
</head>
<body>
<b>Funz Hotspot Gateway.</b>
<br>
<br>
<b>
<img src="$imagesdir/splash.jpg" alt="Splash Page:For access to the Interne
<hr>
<span style="color:red; font-style:normal;">
Bem Vindo!
</span>
</b>
<hr>
<br>
<b>Por favor, para acessar a internet clique em continuar.</b>
<br>
<br>
<hr>
<form method='get' action='$authaction' target='_blank'>
<input type='hidden' name='tok' value='$tok'>
<input type='hidden' name='redir' value='http://webapp.funz.com.br'>
<input type='submit' value='Continue'>
</form>
<hr>Copyright (C) 2004-2016. This software is released under the GNU GPL l
</body>
</html>
`
But the real problem is when I click to submit the form (see below) on a mobile device and the login "pop-up" closes instantly and I am not redirected to setting URL, But when I use the browser on the android device the redirect to the setting URL well.
<form method='get' action='$authaction' target='_blank'>
<input type='hidden' name='tok' value='$tok'>
<input type='hidden' name='redir' value="http://webapp.funz.com.br">
<input type='submit' value='Continue'>
</form>
Some One had some idea to solve this problem with the redirect to a URL with the nodogsplash Captive Portal on a Mobile devices.
Thanks Until now.
This is a default behavior of android captive network assistant. It is very specific about its functionality and one feature is, that when it finally detects it got connected to the internet, it immediately closes itself. It doesnt happen on iOS devices and older androids though.
You might want to try send the form with ajax and redirect manually, this way I think I have achieved holding the page longer, but I am not sure now why I abandoned this solution. Probably because some misbehavior on other devices.
I am developing android application using eclipse ADT phonegap, when i select date ,no calender popup. thank you in advance.........
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">Date of Birth:</label>
<input type="date" name="bday" id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
Your code is correct but basically is not working in Internet explorer and Mozilla . i try with chrome and it will work perfectly.and phone gap basically depend on browser.And I don't know about it so much. so sorry for that.
Phone Gap (Cordova) currently uses the standard Android WebView which is a stripped down version of a browser (based on a particular version of WebKit).
It can't really be the Chromium-based WebView yet, that was just made available as a component to third party developers only recently in Android 4.4.
And as of April 1st 2014, Android 4.4 (KitKat) constitutes only about 5.3% of all the Android versions (not to mention, this new Chromium-based WebView still seems to be a work in progress, so it will take a while for most third party developers to feel completely comfortable with it).
jsfiddle.net/4r9mopwr/embedded/result/
Open it with chrome
http://www.w3schools.com/jsref/dom_obj_date.asp
First of all, jQuery UI Datepicker widget combined with a 3rd party wrapper to make this work with jQuery Mobile, so you need to combine jquery-mobile-datepicker-wrapper js and css in your page from here https://github.com/arschmitz/jquery-mobile-datepicker-wrapper, then in html
<input type="text" class="date-input">
<script>
$(function(){
$( ".date-input" ).datepicker();
})
</script>
I'm trying to figure out why it does not work for me following code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myTestForm</title>
</head>
<body>
<form action="ok" method="post" id="myform">
<p>
<input name="user_name" type="text" required id="user_name">
</p>
<p>
<input name="user_password" type="password" required id="user_password">
</p>
<input name="sumbit" type="submit" id="sumbit" value="send">
</form>
</body>
</html>
I try to test it with Chrome or Android Dolphin Browser but it does not work
It works only on normal computer In most browsers
Anyone know why it does not work ? Is there a way to solve this problem
The required attribute only works on android versions < 2.3.
http://www.wufoo.com/html5/attributes/09-required.html
Basic javascript validation using jQuery :
$('[required]').on('blur', function () {
if (!$(this).val().length) { // check if the value is empty
// Could do an alert or something else
}
});
I made a simple example using the android plugin for printplugin
Here the plugin:
https://github.com/EionRobb/phonegap-print-plugins/tree/master/Android
My code is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Prueba de Impresion</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script src="printplugin.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function imprime(){
var html = document.getElementById("printHTML").innerHTML;
window.plugins.printPlugin.print(html,
function(result) {
alert("print ok");
},
function(result) {
if (!result.available){
alert("no printing available");
}
else{
//Localised error description
alert(result.error);
}
}
);
}
</script>
<div data-role="page" id="page">
<div data-role="header">
<h1>Prueba de Impresion</h1>
</div>
<div data-role="content">
<button data-icon="gear" onClick="imprime();">Imprimir</button>
Contenido</div>
<div id="printHTML">
<div style="color: red;">
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled 'ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.</p>
</div>
<div style="color: green; page-break-before:always;">
<p>In the Propontis, as far as I can learn, none of that peculiar substance called BRIT is to be found, the aliment of the right whale. But I have every reason to believe that the food of the sperm whale—squid or cuttle-fish—lurks at the bottom of that sea, because large creatures, but by no means the largest of that sort, have been found at its surface. If, then, you properly put these statements together, and reason upon them a bit, you will clearly perceive that, according to all human reasoning, Procopius's sea-monster, that for half a century stove the ships of a Roman Emperor, must in all probability have been a sperm whale.</p>
</div>
<div style="color: blue; page-break-before:always;">
<p>They were not their families, nor their wives, nor their servants; the relationship was peculiar, and so unlike anything known to us that it is most difficult to describe. All property among the green Martians is owned in common by the community, except the personal weapons, ornaments and sleeping silks and furs of the individuals. These alone can one claim undisputed right to, nor may he accumulate more of these than are required for his actual needs. The surplus he holds merely as custodian, and it is passed on to the younger members of the community as necessity demands.</p>
</div>
</div>
<div data-role="footer">
<h4>Pie</h4>
</div>
</div>
</body>
</html>
the application runs and displays the message: no printing available, and in logcat I see the following message:
Error: Status=undefined Message=Class not found at file:///android_asset/www/phonegap.js:473
I have installed 1.4.4 send2printer
if someone could tell me I'm doing wrong
Thanks to all in advance
I have started to develop using jQuery mobile and for validation on the android because of lack of html5 support, thought I would try h5Validate. Now try as I might, I cannot get this to work. I have posted my inputs and if someone could just show me a mark-up for this I would be grateful. Thanks
h5Validate link:
http://ericleads.com/h5validate/?name=
html
<div data-role="fieldcontain">
<label for="slider">No of Boxes *</label>
<input type="range" name="slider" id="slider" data-h5-errorid="boxnumber" title="Required: Please enter your box(es)." required data-track-theme="a" value="0" min="0" max="10" required />
</div>
<div id="boxnumber" class="ui-state-error message" style="display:none;" data-theme="b">
script
<script>
$(document).ready(function () {
$('#login').h5Validate({
errorClass:'black'
});
});
</script>
css
.ui-state-error {
background-color:#BB1100;
color:white;
}
#login input, label {
float:left;
}
.message {
margin-left:1em;
width:20em;
border:1px;
padding:2px;
float:left;
font-size:10pt;
}
.black {
background-color:#111111;
color:silver;
}
The new input types were being ignored by h5Validate. I've fixed that. If you still have trouble, let me know. You can file bug tickets here: https://github.com/dilvie/h5Validate/issues?sort=created&direction=desc&state=open
Try upgrading to the latest h5Validate.