覆盖内容可编辑段落的粘贴可防止自动滚动

时间:2018-10-17 20:01:04

标签: html css angular typescript paste

我正在使用角度

我有一个自定义输入组件,该组件由带有<p>的{​​{1}}元素组成,并且我听在该contenteditable="true"上的粘贴(这样我就可以知道用户何时粘贴了可以将内容转换为纯文本):

<p>

这非常有用,可以防止将html格式的内容粘贴到输入字段中。

但是,当我粘贴大量文本(超出允许输入字段增长的最大高度)时,它不会自动向下滚动以显示光标所在的位置。我必须键入一些内容,然后它会跳到用户要键入的光标处。如果我允许默认粘贴有效(即删除onPaste(event: ClipboardEvent) { // Prevent the normal paste functionality. event.preventDefault(); // Get the text being pasted and convert it to plain text. const plainText = event.clipboardData.getData('text/plain'); const selection = window.getSelection(); const range = selection.getRangeAt(0); // Remove the html-formatted content. range.deleteContents(); // Re-add the content as plain text. const textNode = new Text(plainText); range.insertNode(textNode); // Move the cursor to the end of the pasted text. selection.collapse(textNode, textNode.length); } ),则它会自动滚动(但当然会显示html格式的文本)。

自定义粘贴后如何显示光标?

0 个答案:

没有答案