I am currently having trouble with focus on my inputs for iOS. It works perfectly on Android, but for some reason something is going with iOS where sometimes it takes multiple clicks before it actually registers a click event on the input and opens the keyboard with focus in the input and other times it gives focus to some random element behind the visible one so the keyboard opens, but the input field doesn't have focus. We have multiple inputs that are hidden behind the visible one, but I don't think that should matter.
Ionic info:
Your system information:
Cordova CLI: 6.2.0
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X Sierra
Node Version: v6.3.0
Xcode version: Xcode 8.0 Build version 8A218a
A basic outline of our code can be found here: http://codepen.io/anon/pen/wzYEQk
<ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
<ion-content class="background-cntr" delegate-handle="mainScroll">
SOME HTML CONTENT
</ion-content>
<ion-footer-bar>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text"/>
<input type="text" style="display:none;"/>
</label>
<button>Test</button>
</div>
</div>
</ion-footer-bar>
</ion-view>
Does anyone know how to solve this?
Remember adding this preference tag on my config.xml file before.
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
This made the autofocus work before.
I have figured out the solution and to make it work better. Instead of having all the inputs within the footer, I add and remove them every time. That way there is only ever one input within the footer. This seems to work fairly well. The second thing I did was to handle the phantom keyboard case by add the following code to the controller.
window.addEventListener('native.keyboardshow', function(){
if (document.activeElement.nodeName !== "INPUT") {
var activeElement = document.querySelector("#chat_footer_inputs input");
if (activeElement) {
activeElement.focus();
$ionicScrollDelegate.scrollBottom(true);
}
}
});
JS
angular.module('ionicApp', ['ionic'])
.factory('focus', function($timeout, $window) {
return function(id) {
$timeout(function() {
var element = $window.document.getElementById(id);
if(element)
element.focus();
});
};
})
.controller('MyCtrl', function($scope, focus) {
focus("myInput")
});
HTML
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Input trouble on iOS</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-view title="COMPANY" hide-back-button="true" can-swipe-back="false">
<ion-content class="background-cntr" delegate-handle="mainScroll">
SOME HTML CONTENT
</ion-content>
<ion-footer-bar>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text"/>
<input type="text" style="display:none;"/>
</label>
<button>Test</button>
</div>
</div>
</ion-footer-bar>
</ion-view>
</body>
</html>
Related
I am trying to build my first application on windows platform using phone gap. I am able to run my application but I'm not able to see any icon like back button, menu button icon in both emulator and device. How can we get the data-icons in page header.
CSS:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
HTML:
<div data-role="page" id ="pichartimg">
<div data-theme="a" data-role="header">
<h3>Pie Chart</h3>
Back
</div>
<div id='canvasDivpie' class = "sidebar"></div>
</div>
I'm not able to see the back button in page header. What is the issue and how to get icons.
I have been struggling with this too. My experience ist, that it's important to have the correct order in your Javascript inclusions.
I suggest you to first include your CSS. Then right after in the following order:
jQuery
Jquery Mobile
Cordova
any other Javascript
Done so the below example should display a button in your header with an icon on the right side:
<div id="header" data-role="header" data-position="fixed" data-theme="a">
<h1>Some Headline</h1>
</div>
Hope that helps!
I have implemented a basic example with phonegap for android in eclipse. Than i went with ios environment. I have downloaded the cordova plugin and created a new project. Then i replaced www folder with the www folder that i have created for android. The index html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=content-type content=text/html charset="utf-8">
<title>navigator.network.connection.type Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
// document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function helloworld() {
console.log('phone gap log...');
alert('Hello World');
}
</script>
<script src="http://debug.phonegap.com/target/target-script-min.js#anonymous"></script>
</head>
<body background="login.png">
<img alt="" src="login_logo.png" STYLE="position:absolute;LEFT:25px">
<form STYLE="position:absolute;TOP:175px; LEFT:65px; WIDTH:100px; HEIGHT:50px" >
Kullanıcı Adı:<br> <input type="text" id="uname" ><br>
Şifre:<br> <input type="text" id="pword"><br>
</form>
<button type="submit" onclick="helloworld()" STYLE="position:absolute;TOP:295px; LEFT:110px; WIDTH:100px; HEIGHT:50px" >GİRİŞ</button>
</body>
</html>
the style of the screen is same as with android. But when i pressed the submit button, i have got no action or no log in xcode or ios simulator. But it works on android and on eclipse. Why my simple code does not work on ios environment?
The onclick event isn't reliable in the Web View. You need to use ontouchstart or another event listener instead. The Apple Documentation lists the supported touch events.
So in your case you would have to change the button to something like this:
<button type="submit" ontouchstart="helloworld()" STYLE="position:absolute;TOP:295px; LEFT:110px; WIDTH:100px; HEIGHT:50px" >GİRİŞ</button>
I'm writing a Html 5 application for mobile devices using jQuery mobile (and Phonegap, but the following is device independent), using one html page that contains various <div data-role="page"... > elements as subpages. To change between one subpage and another I use $.mobile.changePage. Everything works well unless I place a div tag into one of the <div data-role="content"> containers!
Working example:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.mobile.changePage($('#page2'), {
transition : 'slideup',
reverse : false,
changeHash : true
});
});
</script>
</head>
<body>
<div data-role="page" id="page1" data-theme="a">
<div data-role="content">
Page1
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="content">
Page2
</div>
</div>
</body>
</html>
Now, after adding something as simple as a closed div tag behind Page1
Page1 -> Page1<div />
$.mobile.changePage still fires - one can see the page2 content for a second - but then shows a blank screen.
This happens in desktop browsers as well as in a smartphone (using Phonegap and adjusting the code).
I really appreciate any kind of idea or hint. Narrowing down this problem and making it reproducible alone cost me hours a valuable livetime because it seemed to unlikely....
Change
Page1<div />
to
Page1</div>
...
Page1<div>test</div>
works too.
Not sure why jqm is having a problem with the trailing / on the empty div.
i am using Jquery mobile slider.I want make the slider in steps.
so i have tried with this.
<div data-role="page">
<div data-role="content">
<label for="slider" class="ui-hidden-accessible">Input slider:</label>
<input type="range" name="slider" id="slider_0" value="25" min="0" max="100" step="25" />
</div>
the slider is sliding well but it is not moving in the steps.
eg: 100/25 =4
so it should point only at 25,50,75,100 but its sliding every where.
I have seen an live example at this place. its working fine here but why its not working for me.
http://code.jquery.com/mobile/latest/demos/docs/forms/slider/index.html
here is my jsfiddle
http://jsfiddle.net/chakrirajni/pfNDB/
Thanks,
This Bug has been Fixed in Latest version JQuery Mobile Libraries mentioned below
1)stable version - 1.0.1 http://jquerymobile.com/blog/2012/01/26/jquery-mobile-1-0-1-released/
2)Unstable build - 1.1.0 RC1 http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/
Ya got it.
I have used these likns.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"> </script>
its working fine.
but i dont want to see the textbox beside the slider. how can i do that in this version in
my code looks like this.
<label for="slider" class="ui-hidden-accessible">
Input slider:</label>
<input type="range" name="slider" id="slidstep" step="25" value="0" min="1" max="100"/>
Thanks for ur help.
I think it's there in jQTouch but how do I add a full screen welcome image for my iPhone web app developed using jQueryMobile?
The app is a full screen web app and it is already added in the iPhone Homescreen.
This is just a concept but you could try something like this:
Live Example: http://jsfiddle.net/yzvWy/14/
JS
$(function() {
setTimeout(hideSplash, 2000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
HTML
<div data-role="page" data-theme="b" id="splash" style="background-color: #fff;">
<div class="splash">
<img src="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/images/jquery-logo.png" alt="splash" />
</div>
</div>
<div data-role="page" data-theme="b" id="home">
<div data-role="content">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Overview</li>
<li>Intro to jQuery Mobile</li>
<li>Features</li>
<li>Accessibility</li>
<li>Supported platforms</li>
</ul>
</div>
</div>
</div>
iOS has its propertiary stuff for displaying a splash while app loads. I didn't use it yet (I didn't need that) but here's how they say it can be done:
<link rel="apple-touch-startup-image" href="img/splash.png" />
You might want this too:
<link rel="apple-touch-icon" href="./apple-touch-icon.png" />
See here for more:
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
Thanks for the help. This didn't work with the current stable release of Jquery Mobile, since it doesn't yet support 1.7. I managed to combine it another solution on the matter and came up with:
$ (function(){
setTimeout(function(){
$.mobile.changePage("#home", "fade");
}, 3000);
});
Thanks!