我有一个 Angular 组件,允许用户将数据输入到textarea
中。有两个与此keydown
和paste
相关的事件。这两个事件都触发相同的方法,该方法将尝试确定输入的数据。
我遇到的问题是将数据粘贴到paste
时,获得了formControl
的值,但是粘贴了数据之前的值,并且不包括我实际上刚刚输入到字段中的值。
HTML
<textarea
formControlName="multiSearch"
class="form-control"
placeholder="Enter one or more values. One per line."
rows="6"
(keydown)="keyDownFunction($event)"
(paste)="onPaste()">
</textarea>
组件
/**
* If we hit enter in our text area, determine the data type
*/
keyDownFunction(event) {
// Enter Key?
if (event.keyCode == 13) {
this.determineDataType();
}
}
/**
* If we paste data in our text area, determine the data type
*/
onPaste() {
this.determineDataType();
}
/**
* Using regex, determine the datatype of the data and confirm with the user.
*/
determineDataType() {
console.log(this.searchForm.value.multiSearch)
}
问题
如何触发
paste
事件后立即访问粘贴到表单中的数据,而不是粘贴之前的值? 最佳答案
您可以通过处理paste
事件从textarea
事件中获取粘贴的内容以及input
的更新内容:
<textarea #myText (paste)="onPaste($event)" (input)="onInput(myText.value)"></textarea>
使用此代码:
onPaste(event: ClipboardEvent) {
let clipboardData = event.clipboardData || window.clipboardData;
let pastedText = clipboardData.getData('text');
...
}
onInput(content: string) {
...
}
有关演示,请参见this stackblitz。