Prevent scrolling on keyboard display iOS 6 - javascript

I am running into a strange issue. I am currently producing a mobile web app using HTML5 and CSS3 for iOS 6 only.
However, when an input element receives focus and the soft keyboard is displayed, the window is scrolled so that the input is not obscured by the keyboard (even though it won't be in any instance).
I have read on SO and via Google that one can add the following to prevent this behaviour (when viewing this inside a UIWebView):
input.onfocus = function () {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}
However, it seems that in iOS 6, even though the window is initially scrolled to 0,0, it is then once again scrolled to centre the focused element. Has anyone else come across this and do they know of a fix for iOS 6?

I hit this issue too. The following works on iOS 6:
<input onfocus="this.style.webkitTransform = 'translate3d(0px,-10000px,0)'; webkitRequestAnimationFrame(function() { this.style.webkitTransform = ''; }.bind(this))"/>
Basically, since Safari decides whether or not to scroll the page based on the textbox's vertical position, you can trick it by momentarily moving the element above the top of the screen then back again after the focus event has completed.
The drawback is that the element vanishes for a fraction of a second. If you want to work around that, you could dynamically insert a clone of the original element at the original location and then remove it in the webkitRequestAnimationFrame callback.

Could it be a timing issue?
Try wrapping it up in a timeout to ensure that it's firing after the native events are firing.
input.onfocus = function () {
setTimeout(function() {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}, 50)
}

Update:
While the accepted solution worked with UIWebView, the newer faster WKWebView has since arrived. And if you are using the latest version of Cordova for iOS you can enable WKWebView for iOS 9 devices, but by default the view will still scroll up. To fix this just add the Keyboard plugin (no CSS hacks needed anymore):
Add Cordova plugins within Terminal:
cordova platform add ios#4
cordova plugin add cordova-plugin-wkwebview-engine --save
cordova plugin add cordova-plugin-keyboard --save
Set iOS preference to use WKWebView in Cordova's config.xml
<platform name="ios">
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</platform>
Then insert iOS keyboard preferences in Cordova's config.xml
<preference name="KeyboardShrinksView" value="true" />
<preference name="DisallowOverscroll" value="true" />
More detail on iOS preferences are listed on Cordova docs:
https://cordova.apache.org/docs/en/5.4.0/guide/platforms/ios/config.html

Set the input's font-size style to be 1em or higher.
<input type=text style="font-size:1.2em">

Related

Disable scroll background on showing customize popup

I'm using Cordova to build Android/IOS app with Javascript
Versions:
cordova-android: 6.2.3
cordova-ios: 4.4.0
Before continue actions, user must be re-ask to confirm. A comfirmation popup will be displayed.
Problem is user can scroll background screen when popup shown in their own device. In development environment (browser), its working perfectly by setting popup wrapper full size of screen. I need disable scrolling in device for this case.
What are the best and simplest ways to fixed it?
Sorry for my bad English!
<preference name="DisallowOverscroll" value="true"/>
put above line in your config.xml.
JS solution could be putting :
document.querySelector('body').classList.add('noscroll');
just before the confirmation popup.
And remove it after:
document.querySelector('body').classList.remove('noscroll');
where noscroll is a class defined in (for example) in styles.css:
.noscroll {
overflow: hidden;
}

iOS: How to stop screen layout distortion because of Keyboard?

I want to stop the Keyboard from distorting/resizing my layout in my phonegap application. I have used the following native android code to disable and enable resize in the application using a Cordova Plugin:
this.cordova.getActivity().runOnUiThread(new Runnable() {
public void run() {
context.getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
}
});
However I have no idea how to do the same in iOS(6 & 7). Can anyone provide a snippet that I can use? Or point me in the right direction?
This functionality is available in the Cordova Keyboard plugin. You can then either add a preference to the main Cordova config.xml...
<preference name="KeyboardShrinksView" value="false" />
...or call the corresponding method on the created global Keyboard object:
window.Keyboard.shrinkView(false);

how to remove status bar inside config file

I'm using Phonegap to wrap HTML5 mobile app.
I have a problem when I want to remove status bar which is currently covering my header.
I have been adding some preferences inside config.xml file but unsuccessfully.
This is what I have added inside:
<preference name="fullscreen" value="true" />
But I don't see any changes.
Has someone came up with a solution for this?
Setting UIStatusBarHidden to true in your plist hides the status bar in iOS <= 6:
<key>UIStatusBarHidden</key>
<true/>
You can achieve the same thing programatically via: [[UIApplication sharedApplication] setStatusBarHidden:YES]
However, for iOS7 this doesn't seem to work. There you can override prefersStatusBarHidden in your view controller:
- (BOOL)prefersStatusBarHidden {
return YES;
}
Since this method is available since iOS7, overriding it won't have any effect on iOS6.

PhoneGap Build: how to open external url in device browser on Android?

External URL's don't open in the system's browser in my PhoneGap Android application. I'm using PhoneGap Build 2.3.0.
According to the Cordova documentation I used target '_system':
window.open('http://www.myurl.nl', '_system');
In my config.xml I have:
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />
<access origin="*" browserOnly="true" />
But still the links open in my apps webview.
How to solve this?
It's not the answer when you want to keep using PhoneGap Build, but I solved the problem by setting up a development environment for Cordova (PhoneGap) on my machine and compiling the app locally. In Cordova 2.5.0 window.open('http://www.myurl.nl', '_system'); works perfect, it will open the link in the system's browser.
So my advice is to stop using PhoneGap Build and start compiling your app locally. Here's how to set up your development environment for Cordova >>
Late answer,but may be it can help someone.
navigator.app.loadUrl('https://google.com/', { openExternal:true });
Cordova 3.3.1
This question is now a little old, but I felt it was worth updating. This now works fine with PhoneGap Build when used with 2.9.0.
I have compiled and tested it on Android 4.3 and iOS 6.1.3. I do not have the InAppBrowser plugin in my app as that's to open pages in the app, rather than cause the native browser to open them, and I only have the following for the access tags:
<access origin="http://127.0.0.1*"/>
<access origin="http://phonegap.com" subdomains="true" />
This worked for me. Phonegap 3.1.0.
html code:
<a id="ext-link" href="#">Google it</a>
or
<button id="ext-link" href="#">Google it</button>
Javascript (with jQuery+cordova):
$("#ext-link").on("click"), function() {
if (typeof navigator !== "undefined" && navigator.app) {
// Mobile device.
navigator.app.loadUrl('http://www.google.com/', {openExternal: true});
} else {
// Possible web browser
window.open("http://www.google.com/", "_blank");
}
});
Hope that helps.
#George Siggouroglou: It's not a good idea to use an id for elements that eventually will appear more than one time in a document. Instead, its good practice to make the code more modular.
if expecting touch devices its also a good choice to use "tap" before "click" because it fires much faster and earlier than a click. to check touch capable stuff I prefer to use modernizr because it makes feature detection a breeze.
The jQuery Mobile tap event triggers after a quick, complete touch event that occurs on a single target object. It is the gesture equivalent of a standard click event that is triggered by the release state of the touch gesture.
https://api.jquerymobile.com/tap/
hope that helps someone
**html code:**
<a class="ext-link" href="#">Google it</a>
or
<button class="ext-link" href="#">Google it</button>
Javascript (with jQuery):
//define tap or click event type on root level (can be combined with modernizr)
iaEvent = "click";
if (typeof navigator !== "undefined" && navigator.app) {
iaEvent = "tap";
}
$('.ext-link').each.bind(iaEvent, function() {
if (typeof navigator !== "undefined" && navigator.app) {
// Mobile device.
var linktarget = this.attr("href");
navigator.app.loadUrl(linktarget, {openExternal: true});
} else {
// Possible web browser
window.open(linktarget, "_blank");
}
});
Use this
window.open('http://www.myurl.nl', '_blank', 'location=yes');

Android 2.2 Web View windows moves up when Virtual Keyboard appears

I am developing an Application using Phonegap on Android. Everything works fine on OS 2.1 but on OS 2.2 when we click on any input type text field the keyboard appears and whole window moves to UP side and the input type field becomes invisible. Can anybody tell me what exactly be the problem and can it be solved using javascript? How to stop windows resizing functionality on Android 2.2?
I found the same problem on Text Input on android phone is not in view when the keyboard for webview comes up? also, but not the solution.
Adding this
android:windowSoftInputMode="adjustPan"
to your in AndroidManifest.xml will solve the issue
I tried to put following css property and it was working for me on Android 2.2
html, body{overflow: hidden;}
Not sure why it is working, but it is working...
Note: I used "iScroll" plugin for scrolling in my application.
I've never used PhoneGap but I went to their site and I am to understand that it still works via Eclipse and the ADT; if that's the case then this problem can be solved via the AndroidManifest.xml file by adding the following to your <activity> tag for the activity that is invoking the Soft Keyboard:
<activity android:windowSoftInputMode="adjustNothing"
//other flags
/>
Actually this seems to not be the case. The API document I was reading was actually for Honeycomb, this flag isn't in 2.2. Sorry. All of my work recently has been on tablets and I forgot which version of the SDK I had bookmarked for reading since I've been prepping lately.
You might have to enable this script to avoid your app scrolling when your text input field gets focus :)
function preventBehavior(e)
{
e.preventDefault();
};document.addEventListener("touchmove", preventBehavior, false);
this behaviour on android 2.2 append when there is one element in page with a "transform" css attribute (like transform: translate3d(0px, 0px, 0px); )
removing those declarations fixed the problem for me.
(overflow:hidden also but you can't scroll the app anymore)
PS: overridding the declarations does not work unfortunatly

Categories

Resources