如何设置向后选择？

Question

我正在开发基于 textarea 的自定义标记字段。这个想法是有一个文本区域，其中 div 元素绝对位于上方，所以它看起来就像它们在文本区域中。

到目前为止，我很痛苦，但我几乎什么都做了，除了一件事。

甚至可以在 javascript 中设置反向选择吗？当您将光标放在 textarea 中间的某处时，按住 shift 并按几次左箭头，您将获得一个选择。棘手的部分是它不常见 - 它是向后的（它的开始是从结尾向右，不像通常那样）。我的文本区域中有占位符，我在上面显示我的 div（令牌）。当您导航到其中一个时，光标会跳到占位符的另一边，因此感觉很自然。当您按住 shift 并到达占位符时，它会跳到右侧，并设置一个新的选择，因此看起来您选择了标记（您可以按删除，并使用标记本身删除所选范围，这很酷） .但是，如果您从右到左导航，它可能不会起作用，因为设置一个新的选择会使其无法恢复：

从左到右选择：

abcde[start]efg[end](token)
[shift]+[right]
abcde[start]efg(token)[end]
[del]
abcde

从右到左选择

(token)[end]efg[start]abcde
[shift]+[left]
[start](token)abcdeefg[end] //see? it's back to normal
[shift]+[left]
[start](token)abcdeef[end]g //huh?! shift-right moves end point (unexpected)
abcde

所以这里有一个问题：我可以在 textarea 中设置起点大于终点的选择吗？只是element.setSelectionRange(right, left) 在 Firefox 中不起作用，还有其他想法吗？

Answer 1

在 Firebug 控制台中进行了一些实验后，我认为这不是微不足道的。但是，您可以拦截按键事件：

如果用户按下左箭头，您必须自己将选择范围向左扩展并返回false。那么浏览器的默认值就没有被调用，但是用户还是有一种向左选择的感觉。

textarea.onkeypress = function (event) {
  if (!event){event = window.event; /* %#$! IE */ }
  if (event.shiftKey && event.keyCode == 37 /* left */) {
    event.target.selectionStart = currentSelectionStart - 1;
  }
  return false;
};

37 是左箭头，38 是上箭头，39 是右箭头，40 是下箭头。