更新鍵盤事件的輸入值 - Angular2

我們有一個輸入，當用戶在文檔準備就緒的時候按下「df」，我們需要將輸入的值更新爲「b」。

<input type="text" [value]="letter" readonly> 

export class ExercisesComponent { 

letter:string; 

constructor(private router: Router, private exerciseService: ExerciseService, private route: ActivatedRoute) {} 


ngOnInit(): void { 
    this.showKey(); 
} 

showKey(event: any) { 
    let map = {}; 
    self = this; 
    onkeydown = onkeyup = function(e){ 
     e = e || event; 
     map[e.keyCode] = e.type == 'keydown'; 
     if(map[68] && map[70]) { 
      console.log('Keypress D + F '); 
      self.letter = 'b' // Should print letter 'b' in input 
     } 
    } 
} }

當我們按下「d + f」時，我們需要以雙向綁定的實時模式更新輸入值。

只有當我們專注於輸入和離開焦點狀態時，以上代碼纔會將輸入值更新爲「b」。

UPD：這是一個Plunker演示：https://plnkr.co/edit/Xqotggv4xjk5jgsaVHYS?p=preview

問題是，當鍵盤事件在實時模式下被觸發，我們可以如何更新此值？

來源

2016-09-21 vrabota

試試這個：

map = {}; 
@HostListener('document:keyup', ['$event']) 
@HostListener('document:keydown', ['$event']) 
keUp(e) { 
    this.map[e.keyCode] = e.type == 'keydown'; 
    if(this.map[68] && this.map[70]) { 
    console.log('Keypress D + F '); 
    this.letter = 'b' // Should print letter 'b' in input 
    } 
}

Plunker Example

來源

2016-09-23 11:39:40 yurzui

要在自定義組件中執行雙向綁定，您需要使用NG_VALUE_ACCESSOR並實現接口ControlValueAccessor。然後，您可以使用回撥來更新值。這裏是這裏http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

樣本讓

來源

2016-09-23 11:08:32

更新鍵盤事件的輸入值 - Angular2

回答

相關問題