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 Keyboard Button

现在,当我们点击输入字段时,键盘将自动打开,并且按钮将隐藏。

Ionic Keyboard

Ionic 的一个不错的功能是它会调整屏幕上的元素,以便在键盘打开时始终可见聚焦的元素。下面的图片显示了十个输入表单,最后一个是蓝色的。

Ionic Keyboard False

当我们点击蓝色表单时,Ionic 将调整我们的屏幕,以便蓝色表单始终可见。

Ionic Keyboard True

注意 - 这仅在屏幕位于具有滚动视图的指令内时才有效。如果您从其中一个 Ionic 模板开始,您会注意到所有模板都使用ion-content指令作为其他屏幕元素的容器,因此始终应用滚动视图。

广告