如何設置向後選擇？

我正在基於textarea的自定義標記字段。這個想法是有一個textarea與div元素絕對定位在上面，所以它看起來就像它們在文本區域。如何設置向後選擇？

到目前爲止還是很痛苦，但除了一件事之外，我設法做了幾乎所有的事情。

它甚至可以在JavaScript中設置反向選擇？當你在textarea的中間放置一個光標時，按住shift並按幾次左箭頭，你會得到一個選擇。棘手的部分是，它不是平常的 - 它是倒退的（它的開始是從右到左，而不是通常）。在我的textarea中有佔位符，用來顯示我的div（令牌）。當你導航到其中的一個時，光標跳到佔位符的另一邊，所以感覺很自然。當你按住shift併到達佔位符時，它跳到右邊，它設置一個新的選擇，所以它看起來像你選擇了令牌（你可以按下delete，並用令牌本身去除選定的範圍，這很酷）。但如果從右到左導航，因爲設置一個新的選擇將使它unreverted一個習慣可能工作：

左到右的選擇：

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中不起作用，還有其他想法？

來源

2009-12-17 user233603

非常好的問題！ – Boldewyn 2009-12-17 08:32:45

這是非常有趣的，我可以得到一個鏈接，或者它是超級祕密美國國家航空航天局的東西？ :) – 2009-12-17 08:32:48

它仍然在進行中的部件。但是當我確定它已經完成時，我可能會發布它（它是mootools）。下面是一個圖像，讓你知道它是如何工作的：http://img.skitch.com/20091217-89kmqxu8subd5xr8yn1ut7953b.png（它嗅探所有類型的事件，並嘗試將其渲染爲隱藏的div，然後計算在令牌區的位置標記和重新定位的東西）它實際上是在Mac OS X中的Mail.app中的tokenfield的克隆。漂亮的darn關閉克隆:) – user233603 2009-12-17 08:40:00

在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已關閉。

來源

2009-12-17 08:38:14 Boldewyn

是的，但它也不是微不足道的，因爲我必須聽所有可能會分開一段文字或設置新選擇的事件。但我不知何故認爲這將是唯一的方法（即使它不容易在瀏覽器中跟蹤selectionstart事件）。感謝您嘗試。 – user233603 2009-12-17 08:45:15

如何設置向後選擇？

回答

相關問題