通過主機監聽器對角度4更新輸入文本值

我在我的模板中輸入字段，我想捕獲每個按鍵，並通過removinf空白空間修剪更新dom中的值。通過主機監聽器對角度4更新輸入文本值

我可以捕捉到事件，並且我構建的功能正常工作但輸入文本字段中的值未相應更新。

@HostListener('input', [ '$event.target.value' ]) 
    input(value) { 
    console.log('value! ' + value); 
    value = value.replace(/\s/gi, ''); 
    console.log('value after trim ' + value); 
    return true;

}

任何想法？

來源

2017-08-29 john Smith

您可以只使用keyup事件並調用修剪你的價值的方法。 Typescript爲您提供了trim()函數。

你的HTML看起來像這樣：

<input (keyup)="keyUp($event)">

...在你的打字稿代碼中定義的方法：

keyUp(event){ 
    event.target.value = event.target.value.trim(); 
}

鏈接到Plunker Demo

來源

2017-08-29 12:21:27 Faisal

使用Angular時，嘗試實際使用Angular。

有[(ngModel)]="myInput"和(ngModelChange)="cleanup()"現在創建在TS文件中的函數：

cleanup() { 
    this.myInput = this.myInput.replace(/ /g, ''); 
}

來源

2017-08-29 12:10:25 Carsten

更簡單的方法來做到這一點，代碼較少，並且有防止鍵入空格的優點，並且脫字符號像公認的解決方案那樣回到空間。

<input (keydown.space)="$event.preventDefault()">

Plunker here

信貸回答here

來源

2017-08-29 12:42:23 BogdanC

通過主機監聽器對角度4更新輸入文本值

回答

相關問題