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

来源:互联网 发布:如何骂淘宝天下小二 编辑:程序博客网 时间:2024/05/01 23:27

最近开发项目,上级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){      //执行相应的方法    }  }}

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

原创粉丝点击