keyboard

在Android 和 iOS中, Ionic会试图阻止键盘的模糊输入以及聚焦元素,当在视图中滚动出现的时候。为了这项工作,任何可以获取焦点的元素必须在一个滚动视图或一个类似于带有滚动视图的Content指令内。

在获取焦点时,它会试图阻止原生的滚动溢出,这可能会导致布局问题,比如将header挤到上面,并超出视野。

键盘修复可以和Ionic键盘插件最好的协同工作,尽管没有它,Ionic键盘插件也会执行良好。然而,如果你使用Cordova的话,就没有理由用该插件。

当键盘显示的时候隐藏

当键盘被打开的时候,要隐藏一个元素,添加hide-on-keyboard-open类。

<div class="hide-on-keyboard-open">
  <div id="google-map"></div>
</div>

插件用法

使用该插件的用法可以参考 https://github.com/driftyco/ionic-plugins-keyboard


Android平台注意事项

  • 如果你的app全屏运行,即config.xml文件内有<preference name="Fullscreen" value="true" />,你需要手动设置ionic.Platform.isFullScreen = true

  • 你可以配置web视图的行为,通过设置android:windowSoftInputModeadjustPan来显示键盘,在你app中AndroidManifest.xmladjustResizeadjustNothing行为。 adjustResize为Ionic推荐设置,但是如果处于一些原因你使用了adjustPan,那么你需要设置ionic.Platform.isFullScreen = true

    <activity android:windowSoftInputMode="adjustResize">
    

iOS平台注意事项

  • 如果在input获取焦点时,你app的内容(包含header)被挤到上面或视图以外,就需要尝试设置cordova.plugins.Keyboard.disableScroll(true)。这并不会在Ionic滚动视图中禁用滚动,相反,它会禁用原生的滚动溢出,当自动发生input获取焦点在键盘之后时。