获取 hover/dragover 上的插入符号位置

Question

我正在尝试获取（丰富的）文本框的插入符号位置 我正在拖一些文本。

这背后的原因是我需要向文本框中放置的文本添加一些额外的字符，因此我需要防止默认放置行为。

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text");
    var placeholder = document.createTextNode("[%" + data + "%]");
    event.target.appendChild(placeholder);
}

使用 event.target.appendChild 时，内容被放置在文本框的末尾，因此当 dragging/hovering.

时，应该有一种方法可以确定插入符号的位置

这是我希望删除文本的位置：

相反，它被添加到我输入内容的末尾：

Answer 1

我没有操纵 drop-事件，而是通过操纵 dragstart-事件让它工作。

var btn = document.getElementById("foo");

btn.onclick = function(event) {
  event.preventDefault();
};

btn.ondragstart = function(event) {
  event.dataTransfer.setData("text/plain", "[%" + event.srcElement.innerHTML + "%]");
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<span draggable="true" id="foo" class="btn btn-primary">Foo</span>
<input type="text" />

获取 hover/dragover 上的插入符号位置

Getting the caret position on hover/dragover

javascript

input

drag-and-drop

caret