DOM Range, IERange, rangy

有在接觸 JavaScript 編輯器的比較會遇到這問題,就是如何存取、甚至修改使用者選取的文字,按照標準的話,應該是使用DOM 的 Range,不過一如往常,IE 不支援,預計是IE9 才會有正式的支援,而之前的版本則是用他們自己的TextRange,基本上,TextRange 這個標準還蠻難懂的(意思就是我也還沒能了解),然後總之就是不好使用,所以就有了IERange這個函式庫,利用 TextRange 實作了 W3C 的 DOM Range ,而且發展蠻久了,還蠻可靠。

不過 IERange 還有一個問題沒辦法解決,就是輸入欄位如 input 和 textarea 內,文字選取狀態的存取,現在大部分瀏覽器都是支援selectionStartselectionEnd這兩個屬性和setSelectionRange(),標準是定在HTML5 的 text field selections API裡面,IE 的話則是要使用上面提到的 TextRange 來存取,而且實際上操作也沒很簡單,所以也有位Tim Down弄了rangyinputs這個rangy的簡化版,專門針對跨瀏覽器、文字輸入框的選取所做的函式庫,也有包好的 jQuery Plugin,我看 Stack Overflow 上不少篇相關的問題都有人推薦 rangy (作者本人的推薦也不少XD),實際上下去並測了一下還沒有遇到什麼問題,雖然功能上沒什麼問題,不過還是有些地方有些可惜,就是它的 API 沒有跟著 HTML 標準,然後沒有文件,所以要怎麼用要自己看原始碼,另外我覺得有一些地方設計似乎不是很好,像是getSelection()會傳回 range 物件,但是setSelection()卻不能直接把 range 物件送進去,要把選取的開始和結束兩個直分成兩個參數丟進去,不過相較於要跟 TextRange 打交道這檔事,這些缺點根本就是優點啊!

comments powered by Disqus