如何设置向后选择？

Question

我正在开发基于textarea的自定义令牌字段.我们的想法是将一个带有div元素的textarea绝对定位在上面,所以它看起来像是在文本区域.

到目前为止,这是痛苦的,但除了一件事,我设法做了很多事情.

甚至可以在javascript中设置反向选择？当您将光标放在textarea中间的某个位置时,按住shift并按向左箭头几次,您将获得一个选择.棘手的部分是,它不常见 - 它是向后的(它的开始是从最后开始,而不是通常).我的textarea中有占位符,我在其上显示我的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 是向下箭头。