javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve keyboard docs

Browse Source 
Closes #957.
This commit is contained in:
Tim Lancina
2014-05-21 09:04:45 -05:00
parent c091d254ef
commit 665a581cb0
2 changed files with 38 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
js/angular/directive/keyboardAttach.js vendored
View File

@@ -6,8 +6,17 @@
*
* @description
* keyboard-attach is an attribute directive which will cause an element to float above
* the keyboard when the keyboard shows. Currently only supports the [ion-footer-bar]({{ page.versionHref }}/api/directive/ionFooterBar/)
* directive.
* the keyboard when the keyboard shows. Currently only supports the
* [ion-footer-bar]({{ page.versionHref }}/api/directive/ionFooterBar/) directive.
*
* ### Notes
* - This directive requires the
* [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugins-keyboard).
* - On Android not in fullscreen mode, i.e. you have
* `<preference name="Fullscreen" value="true" />` in your `config.xml` file,
* this directive is unnecessary since it is the default behavior.
* - On iOS, if there is an input in your footer, you will need to set
* `cordova.plugins.Keyboard.disableScroll(true)`.
*
* @usage
*

47
js/utils/keyboard.js
View File

@@ -3,16 +3,20 @@
* @name keyboard
* @module ionic
* @description
* On both Android and iOS, Ionic will attempt to prevent the keyboard from obscuring inputs and
* focusable elements when it appears by scrolling them into view. In order for this to work,
* any focusable elements must be within a [Scroll View](http://ionicframework.com/docs/api/directive/ionScroll/)
* or a directive such as [Content](http://ionicframework.com/docs/api/directive/ionContent/) that has a Scroll View.
* On both Android and iOS, Ionic will attempt to prevent the keyboard from
* obscuring inputs and focusable elements when it appears by scrolling them
* into view. In order for this to work, any focusable elements must be within
* a [Scroll View](http://ionicframework.com/docs/api/directive/ionScroll/)
* or a directive such as [Content](http://ionicframework.com/docs/api/directive/ionContent/)
* that has a Scroll View.
*
* It will also attempt to prevent the native overflow scrolling on focus, which can cause layout issues such as
* pushing headers up and out of view.
* It will also attempt to prevent the native overflow scrolling on focus,
* which can cause layout issues such as pushing headers up and out of view.
*
* The keyboard fixes work best in conjunction with the [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugins-keyboard),
* although it will perform reasonably well without. However, if you are using Cordova there is no reason not to use the plugin.
* The keyboard fixes work best in conjunction with the
* [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugins-keyboard),
* although it will perform reasonably well without. However, if you are using
* Cordova there is no reason not to use the plugin.
*
* ### Hide when keyboard shows
*
@@ -26,16 +30,22 @@
* ----------
*
* ### Plugin Usage
* Information on using the plugin can be found at [https://github.com/driftyco/ionic-plugins-keyboard](https://github.com/driftyco/ionic-plugins-keyboard).
* Information on using the plugin can be found at
* [https://github.com/driftyco/ionic-plugins-keyboard](https://github.com/driftyco/ionic-plugins-keyboard).
*
* ----------
*
* ### Android Notes
* - If your app is running in fullscreen, i.e. you have `<preference name="Fullscreen" value="true" />` in your `config.xml` file
* you will need to set `ionic.Platform.isFullScreen = true` manually.
* - If your app is running in fullscreen, i.e. you have
* `<preference name="Fullscreen" value="true" />` in your `config.xml` file
* you will need to set `ionic.Platform.isFullScreen = true` manually.
*
* - You can configure the behavior of the web view when the keyboard shows by setting
* [android:windowSoftInputMode](http://developer.android.com/reference/android/R.attr.html#windowSoftInputMode) to either `adjustPan`, `adjustResize` or `adjustNothing` in your app's activity in `AndroidManifest.xml`. `adjustResize` is the recommended setting for Ionic, but if for some reason you do use `adjustPan` you will need to set `ionic.Platform.isFullScreen = true`.
* [android:windowSoftInputMode](http://developer.android.com/reference/android/R.attr.html#windowSoftInputMode)
* to either `adjustPan`, `adjustResize` or `adjustNothing` in your app's
* activity in `AndroidManifest.xml`. `adjustResize` is the recommended setting
* for Ionic, but if for some reason you do use `adjustPan` you will need to
* set `ionic.Platform.isFullScreen = true`.
*
* ```xml
* <activity android:windowSoftInputMode="adjustResize">
@@ -43,17 +53,14 @@
* ```
*
* ### iOS Notes
* - if you are not using the keyboard plugin, switching to inputs below the keyboard using the accessory bar will automatically use the native browser's
* overflow scrolling and push headers out of view
* - If the content of your app (including the header) is being pushed up and
* out of view on input focus, try setting `cordova.plugins.Keyboard.disableScroll(true)`.
* This does **not** disable scrolling in the Ionic scroll view, rather it
* disables the native overflow scrolling that happens automatically as a
* result of focusing on inputs below the keyboard.
*
*/
/*
IONIC KEYBOARD
---------------
*/
var keyboardViewportHeight = window.innerHeight;
var keyboardIsOpen;
var keyboardActiveElement;