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键盘

Ionic的一个很好的功能是它将调整屏幕上的元素,因此当键盘打开时,聚焦元素始终可见。下图显示了10个输入表单,最后一个表示蓝色。

Ionic键盘错误

当我们点击蓝色表格时,Ionic将调整我们的屏幕,因此蓝色表格始终可见。

Ionic键盘真实

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