Question

有一种自定义方法可以将HTML（ html片段而不仅仅是纯文本）插入编辑器（富文本编辑器），但由于某种原因，我必须使用e.preventDefault来防止浏览器默认粘贴操作并稍后插入复制数据。我的代码如下所示：

editor.addEventListener('paste', function(e) {
   var data = e.clipboardData.getData('text/html'),
       newData;
   e.preventDefault();
   newData = custom.handle(data);
   custom.insert(newData);
}, false);

在custom.insert(newData)之后，光标仍然在原点位置闪烁。我预计它会移动newData的结尾。

任何人都可以帮我解决这个问题吗？

Answer 1

您的问题可能已在此处得到答案：

Use JavaScript to place cursor at end of text in text input element

Set focus and cursor to end of text input field / string w. Jquery

以Mike Berrow为例，您可以将输入值替换为自身，将carret设置为输入的末尾。这似乎是最可靠的方式，如果它有点hackish的事件。

myInput.value = myInput.value;

使用支持它的浏览器，您可以使用setSelectionRange方法。由于您已经使用了clipboardData，因此这不应该是一个问题。

myInput.setSelectionRange(myInput.value.length, myInput.value.length);

请注意，如果使用textarea，可能更难获得值长度。

https://developer.mozilla.org/fr/docs/Web/API/HTMLInputElement/setSelectionRange

Answer 2

我不知道您的custom有哪些功能属性，但您可以使用此代码将光标移动到input和{{1}中文本的末尾}}：

textarea

如果custom.selectionStart = custom.selectionEnd;粘贴在文本的中间或开头，则必须计算newData的长度并将光标移动那么多字符。类似的东西：

newData

编辑以回答您的问题：如何使用HTML标记计算文字长度？

嗯，这有点棘手。您可以在内存中创建临时HTML元素，在其中添加custom.selectionStart = custom.selectionStart + newData.length; custom.selectionEnd = custom.selectionStart;，并计算其newData属性的长度。像这样：

innerText

注意：var temp = document.createElement("div"); temp.innerHTML = newData; custom.selectionStart = custom.selectionStart + temp.innerText.length; custom.selectionEnd = custom.selectionStart;是由Microsoft引入的，不是W3C标准。尽管大多数人都在复制IE的行为，但各个浏览器的实现方式各不相同。 innerText是样式感知的，只会返回可见文本。

如何在阻止浏览器的默认粘贴操作时修复光标位置

2 个答案: