- 离子基础教程
 - 离子 - 主页
 - 离子 - 概述
 - Ionic - 环境设置
 
- Ionic CSS 组件
 - 离子 - 颜色
 - 离子 - 内容
 - 离子 - 标头
 - 离子 - 页脚
 - 离子 - 按钮
 - Ionic - 列表
 - 离子 - 卡片
 - 离子 - 形式
 - 离子 - 切换
 - Ionic - 复选框
 - Ionic - 单选按钮
 - 离子 - 范围
 - 离子 - 选择
 - Ionic - 选项卡
 - 离子 - 网格
 - 离子 - 图标
 - 离子 - 填充
 
- Ionic JavaScript 组件
 - Ionic - JS 操作表
 - Ionic - JS 背景
 - Ionic - JS 内容
 - Ionic - JS 表单
 - Ionic - JS 事件
 - Ionic - JS 标头
 - Ionic - JS 页脚
 - Ionic - JS 键盘
 - Ionic - JS 列表
 - Ionic - JS 加载
 - Ionic - JS 模态
 - Ionic - JS 导航
 - Ionic - JS 弹出窗口
 - Ionic - JS 弹出窗口
 - Ionic - JS 滚动
 - Ionic - JS 侧边菜单
 - Ionic - JS 幻灯片盒
 - Ionic - JS 选项卡
 
- 离子先进概念
 - Ionic - Cordova 集成
 - 离子 - AdMob
 - 离子 - 相机
 - 离子 - Facebook
 - Ionic - 在应用程序浏览器中
 - Ionic - 原生音频
 - 离子 - 地理定位
 - 离子 - 媒体
 - Ionic - 启动画面
 
- 离子有用资源
 - 离子 - 快速指南
 - 离子 - 有用的资源
 - 离子 - 讨论
 
Ionic - JavaScript 键盘
键盘是 Ionic 中的自动化功能之一。这意味着 Ionic 可以识别何时需要打开键盘。
使用键盘
开发人员可以在使用 Ionic 键盘时调整一些功能。当您想在键盘打开时隐藏某些元素时,可以使用hide-on-keyboard-open类。为了向您展示这是如何工作的,我们创建了在键盘打开时需要隐藏的输入和按钮。
<label class = "item item-input"> <input type = "text" placeholder = "Input 1"> </label> <button class = "button button-block hide-on-keyboard-open"> button </button>
上面的代码将产生以下屏幕 -
现在,当我们点击输入字段时,键盘将自动打开,按钮将隐藏。
Ionic 的一个很好的功能是它会调整屏幕上的元素,因此当键盘打开时,聚焦的元素始终可见。下图显示了十个输入表单,最后一个是蓝色的。
当我们点击蓝色表单时,Ionic 将调整我们的屏幕,因此蓝色表单始终可见。
注意- 仅当屏幕位于具有Scroll View 的指令内时,这才有效。如果您从 Ionic 模板之一开始,您会注意到所有模板都使用ion-content指令作为其他屏幕元素的容器,因此始终应用滚动视图。