ionic 4中的(keypress)事件未触发

时间:2019-07-08 09:12:24

标签: javascript angular forms events ionic4

根据此链接https://ionicframework.com/docs/api/input#events离子支持 keypress 事件,该事件在浏览器中可以正常运行,但在移动设备中不会触发

html

<ion-item>
  <ion-label>Default Label</ion-label>
  <ion-input (keypress)="test($event)"></ion-input>
</ion-item>

ts

test(event){

console.log(event);
 e.preventDefault();
}
  

以上代码在非移动设备上的离子服务中正常工作

根据此https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event键的描述,我无法理解

  

我尝试过的事件:按键,击键,击键,ionblur,ionChange,输入等   它要么不起作用,要么阻止默认值不起作用

3 个答案:

答案 0 :(得分:0)

根据您自己的第一个链接,我想您正在寻找事件ionInput Emitted when a keyboard input ocurred.

<ion-item>
  <ion-label>Default Label</ion-label>
  <ion-input (ionInput)="test($event)"></ion-input>
</ion-item>

答案 1 :(得分:0)

  

将$ event传递给事件处理程序。 $ event是一个DOM KeyboardEvent。

<input type=text (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
} 

如果知道所需的KeyboardEvent属性,则可以将其传递到事件处理程序中:

<input type=text (keypress)="eventHandler($event.keyCode)">

eventHandler(keyCode) {...}

答案 2 :(得分:0)

将readonly属性与@Gilsidoo答案中的ionInput事件一起使用,或将其他事件用作keyPress,这可能在您的情况下有效。

<ion-item>
  <ion-label>Default Label</ion-label>
  <ion-input readonly (ionInput)="test($event)"></ion-input>
</ion-item>

编辑:我想带有只读的onInput将不起作用,请尝试使用keyup。