javascript - 如何设置向后选择？

Question

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

到目前为止很痛苦，但除了一件事，我几乎完成了所有事情。

是否可以在 javascript 中设置反向选择？当您将光标放在文本区域中间的某个位置时，按住 Shift 键并按几次向左箭头，您将获得一个选择。棘手的部分是它不常见 - 它是倒退的(它的起点是从终点向右，不像通常那样)。我的文本区域中有占位符，我在上面显示我的 div(标记)。当您导航到其中一个时，光标会跳到占位符的另一边，所以感觉很自然。当你按住 shift 并到达占位符时，它会跳到右边，并设置一个新的选择，所以看起来你选择了标记(你可以按 delete，并用标记本身删除所选范围，这很酷) .但是，如果您从右向左导航，它可能无法工作，因为设置新选择会使它无法恢复:

从左到右的选择:

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

所以问题来了:我可以在开始点大于结束点的文本区域中设置选区吗？简单的 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 是下箭头。