检测剪贴板中从 gmail 拆分的行 (angular)

Question

我试图让用户从 gmail 粘贴到一个字段，并检测换行符。它不需要是文本区域，我只是想检测换行符。

问题是当用户粘贴如下内容时...剪贴板似乎没有检测到中断（即使用户在 gmail 中按了回车键）

Item 1 
Item 2 
Item 3

要检测到它，用户似乎必须按两次回车...如下所示：

Item 1

Item 2

Item 3

有没有办法检测 gmail 中的换行符？

下面似乎适用于记事本、收件箱和其他我从中复制的区域。

Stackblitz Demo

组件：

<input type="text" placeholder="paste items here" (paste)="onPaste(i, $event, $event)">

<div *ngIf="itemArray.length > 0">
Item list:
</div>

<div *ngFor="let item of itemArray">
  {{item}}
</div>

TS:

itemArray = [];

  onPaste(i, event: ClipboardEvent, value) {
    let clipboardData = event.clipboardData;
    let pastedText = clipboardData.getData('text/plain').split("\n");
    pastedText.forEach(item => {
      item = item.toString()
      item = item.replace(/(\r\n|\n|\r|\s\r|\r)/gm, "")
      this.itemArray.push(item) 
    })
  }

Answer 1

我认为问题是粘贴的文本有换行符，只是回车 return (\r)。这不会传输到输入字段中。看起来只是 \n 过去了。我发现了一种使用文本区域的方法，该文本区域独立于 \r 或 \n 或 \r\n 接管换行符。然后使用文本区域的输入事件从中读取文本。所以它是剪贴板的一种代理。我知道这不是一个合适的解决方案，但可能会有所帮助。

我修改了你的Stackblitz。

Answer 2

您可以使用 <p>{{item}} </p> 而不是 {{item}}

<div *ngFor="let item of itemArray">
    <p>{{item}} </p> 
</div>

stackBlitz answer

希望这会有所帮助...！

检测剪贴板中从 gmail 拆分的行 (angular)

Detect line split from gmail in clipboard (angular)

clipboard

gmail

paste

typescript

angular