javascript Angular - 在粘贴事件上获取内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50138910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular - On Paste Event Get Content
提问by SBB
I have an angular component that allows a user to enter data into a textarea. There are two events tied to this keydownand paste. Both of these events trigger the same method which will try and determine the data entered.
我有一个角度组件，允许用户将数据输入到textarea. 有两个事件与 thiskeydown和 相关paste。这两个事件都会触发相同的方法，该方法将尝试确定输入的数据。
The issue I am having is when the data is pasted paste, I am getting the value of the formControlbut its the value BEFORE the data is pasted and doesn't include what I actually just entered into the field.
我遇到的问题是粘贴数据时paste，我得到了 的值，formControl但它是粘贴数据之前的值，不包括我实际刚刚输入到字段中的内容。
HTML
HTML
<textarea
formControlName="multiSearch"
class="form-control"
placeholder="Enter one or more values. One per line."
rows="6"
(keydown)="keyDownFunction($event)"
(paste)="onPaste()">
</textarea>
Component
零件
/**
* 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)
}
QuestionHow can I get access to the data that is pasted into the form as soon as the pasteevent is fired and not what the value was before pasting?
问题如何在paste触发事件后立即访问粘贴到表单中的数据，而不是粘贴前的值？
回答by ConnorsFan
You can get the pasted content from the pasteevent and the updated content of the textareaby handling the inputevent:
您可以通过处理事件来获取paste事件的粘贴内容和更新的内容：textareainput
<textarea #myText (paste)="onPaste($event)" (input)="onInput(myText.value)"></textarea>
with this code:
使用此代码：
onPaste(event: ClipboardEvent) {
let clipboardData = event.clipboardData || window.clipboardData;
let pastedText = clipboardData.getData('text');
...
}
onInput(content: string) {
...
}
See this stackblitzfor a demo.
有关演示，请参阅此 stackblitz。
回答by Sandeep K Nair
This is from an example with angular2 typescript that works for my project. Hope it helps someone. Logic is same for other cases as-well.
这是来自一个适用于我的项目的 angular2 打字稿示例。希望它可以帮助某人。其他情况的逻辑也是一样的。
- angular-clipboard-event.html
- 角度剪贴板-event.html
<textarea placeholder="Type a message" (paste)="onPaste($event)"></textarea>
<!-- Place to render the image -->
<img #imgRenderer />
- angular-clipboard-event.ts
- 角度剪贴板-event.ts
// Reference to the dom element
@ViewChild('imgRenderer') imgRenderer: ElementRef;
onPaste(event: any) {
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
let blob = null;
for (const item of items) {
if (item.type.indexOf('image') === 0) {
blob = item.getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
const reader = new FileReader();
reader.onload = (evt: any) => {
console.log(evt.target.result); // data url!
this.imgRenderer.nativeElement.src = evt.target.result;
};
reader.readAsDataURL(blob);
}
}
