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.
Related
HTML 'input' tag with type file is not working in mobile. How to fix it?
Help me to fix it.
Thanks in advance.
My code follows below:
<body>
<h1><font color="white">REPORT</font></h1>
<br><br>
<form id="f1" action="summary.html">
<p>
<b><font color="white">Project Name:</font></b><br>
<input type="text" name="project" id="project" value="" required="required">
</p>
<p>
<b><font color="white">Report:</font></b><br>
<input type="file" accept="application/pdf">
</p>
<p>
<button type="button" onclick="submitData()">Submit</button>
</p>
</form>
</body>
edit 1:
My JS code as follows:
function submitData() {
var proj = document.getElementById("project").value;
if( proj == "") alert("Please enter the required field");
else document.getElementById("f1").submit();
}
I develop on Ionic framework and had the same problem.
For me, removing the accept input make things works.
I see that this have a partial support and shouldn't then be use for Hybride app.
I have try it on my mobile Chrome Browser it have no Problem look at the photo
I'm using cordova-plugin-wallpaper which works fine if i hardcode image like this.
window.plugins.wallpaper.setImage("images/1462204239933.jpg");
but if i try to get image link with jquery from active slide, it won't set wallpaper with android app. This is what i tried.
var picture = $$(".swiper-slide-active").find(".pic").attr('src');
window.plugins.wallpaper.setImage('"'+picture+'"');
I checked console.log and it's getting image src fine for each slide. Any suggestion how to work around this? Thanks
There was strings around variable ('"'+picture+'"') which were causing the issue. Removing that fixed the issue. Thanks to "flyingP0tat0" for pointing this on github issue.
Here is the full code if anyone need.
HTML
<div class="page-content">
<button class="setwp floating-button"><i class="icon icon-plus"></i></button>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/001.jpg" rel="1"></div>
<div class="swiper-slide"><img src="images/002.jpg" rel="2"></div>
<div class="swiper-slide"><img src="images/003.jpg" rel="3"></div>
</div>
</div>
</div>
JS
function wp() {
var wppic = $$(".swiper-slide-active").find("img").attr('src');
window.plugins.wallpaper.setImage(wppic);
}
function wpalert() {
alert('Wallpaper is set');
}
$$('.setwp').on('click', function (e) {
wp(); wpalert();
});
The code below works fine on a desktop browsers, where I am able to capture each keystroke. However the same code does not capture keystrokes on Android mobile browser. What could be the reason for this behavior? Thanks in advance
<div data-role="page" id="sphome" >
....
<form action="Tokens" method="GET" id="TokenSubmit" >
<input size="10" type="text" name="BToken" id="token">
....
</form>
</div>
$('#token').on('keyup',function(event){
alert(event.which);
})
Try using document on like;
$(document).on('keyup','#token', function() {
// code
});
This one should work.
When a mobile browser brings up a keyboard it tries to move the scrollbars so that the input is still in view.
On iOS Safari it seems to do this properly by finding the nearest scrolling parent.
On Android native or Chrome mobile browser it seems to just try the body element and then gives up, so the focused input is hidden beneath the keyboard.
How to break it
Set overflow-y: hidden on the body element. Create a scrollable container and put a form in there.
When you select an element near the bottom of your screen it will be obscured by the keyboard.
Demo
http://dominictobias.com/android-scroll-bug/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Android scroll/focus bug</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.scroll {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
}
input {
margin-bottom: 20px;
width: 100%;
}
</style>
</head>
<body>
<div class="scroll">
<input type="text" value="Input 1">
<input type="text" value="Input 2">
<input type="text" value="Input 3">
<input type="text" value="Input 4">
<input type="text" value="Input 5">
<input type="text" value="Input 6">
<input type="text" value="Input 7">
<input type="text" value="Input 8">
<input type="text" value="Input 9">
<input type="text" value="Input 10">
<input type="text" value="Input 11">
<input type="text" value="Input 12">
<input type="text" value="Input 13">
<input type="text" value="Input 14">
<input type="text" value="Input 15">
<input type="text" value="Input 16">
<input type="text" value="Input 17">
<input type="text" value="Input 18">
<input type="text" value="Input 19">
<input type="text" value="Input 20">
</div>
</body>
</html>
Any ideas how to fix this? Will it require some browser detection and messy hacks?
This is a bug in the Android native browser. By the way, the input scrolls into the view after a character is typed on the soft keyboard.
The following code snippet placed somewhere in the page should help:
if(/Android 4\.[0-3]/.test(navigator.appVersion)){
window.addEventListener("resize", function(){
if(document.activeElement.tagName=="INPUT"){
window.setTimeout(function(){
document.activeElement.scrollIntoViewIfNeeded();
},0);
}
})
}
The answer from Serge is great but I had a few modifications that improved it for me.
The problem appeared on Android 6 for me as well so I added it to the check and I needed the fix to work for textareas as well as inputs.
if(/Android [4-6]/.test(navigator.appVersion)) {
window.addEventListener("resize", function() {
if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
window.setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
},0);
}
})
}
If anyone needs the fix in Angular 1, here is what I used there.
angular.module('<module name>').run(function ($window, $timeout) {
if(/Android [4-6]/.test($window.navigator.appVersion)){
$window.addEventListener("resize", function(){
if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA"){
$timeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
});
}
});
}
});
Offering slight revision if it saves anyone some time:
No need to specify an Android version # (less likely to break when your user gets Android 7.0+)
No need to wrap in a setTimeOut
MDN advises against .scrollIntoViewIfNeeded bc of browser incompatibility => .scrollIntoView is a workable substitute with slightly more browser compatibility
if(/Android/.test(navigator.appVersion)) {
window.addEventListener("resize", function() {
if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
document.activeElement.scrollIntoView();
}
})
}
Looking at this slightly differently the bug seems to be caused by the Suggestions feature of the browser. As I don't really want the suggestions anyway I've used:
if(/Android/.test(navigator.appVersion)){
$('input[type="text"]').attr('autocomplete', "off");
}
which gives a much smoother experience.
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.