ionic3开发系列——实现对手机软件键盘按键的监听

最新推荐文章于 2020-12-18 21:15:07 发布

Crazy_LinkFern

最新推荐文章于 2020-12-18 21:15:07 发布

阅读量4.2k

点赞数 2

分类专栏： ionic3 文章标签： ionic3开发 ionic3对手机按键监听 ionic ion-input

本文链接：https://blog.csdn.net/qq_32107121/article/details/78800206

版权

9 篇文章 1 订阅

订阅专栏

最近开发项目，上级boss给出的一个需求是：在input输入框输入值后，点击手机软件键盘的确认键之后对文本框中的值进行下一步的操作。

百度了好多都没有找到关于ionic3相关的教程或者解决办法，

看到最多的是在*.html页面操作，即：将input输入框和一个button按钮放在一个form表单中，这样点击键盘的确认键就可以执行button里的方法

<form>
  <ion-input type="text"></ion-input>
  <button ion-button (click)="next()"></button>
</form>

但是这样就会限制一些功能，而且输入框旁边带着总带着一个按钮会影响页面美观。

之后又搜到了一些JavaScript对键盘的按钮监听的方法，最后找了一个代码结构相对简单的，然后给转换到了ionic3项目里。（实力不够，无法直接将js代码直接嵌套进入ionic3项目，所以只能尽最大努力修修改改了，如果您有更好的解决办法，可以评论里留个博客链接，彼此互相学习）

*.html代码段如下：

<ion-input type="text" id="input" (ionFocus)="focusInput()"></ion-input>

*.ts代码段如下：

focusInput(){
  var idInput=document.getElementById("input");
  idInput.onkeyup=(event)=>{
    if(event.keyCode==13){
      //执行相应的方法
    }
  }
}

这样就实现了对手机软件键盘按键的监听，亲测有效！

关注