JavaScript: クロスブラウザなselectionStart/selectionEnd

Mozillaで実装されているselectionStart/selectionEndをIEでも使えるようにする、Selection.jsを公開しました。

IEのTextRangeオブジェクトは、

• range.textを書き換えると選択範囲末尾の改行が消えてしまう。
• 選択範囲の前後のコンテクストを見て処理を行うのが難しい。

のような使いにくい点があります。

これは、HTMLの書き換えでは問題にならないかもしれませんが、テキストエリア内の文字列を書き換える場合にやっかいな問題を引き起こします*1。

一方、MozillaのselectionStart/selectionEndは、textarea.valueに対する文字列操作として実装できるため、余計な心配が要りません。

というわけで、クロスブラウザなselectionStart/selectionEndを実現するSelection.jsを作成しました。IEでは、

1. テキストエリアに含まれないマーカー文字列を作成。
2. range.text = マーカー + range.text + マーカー
3. indexOfでマーカー位置を取得。
4. テキストエリアの内容を元のテキストに戻す。

のようにして選択範囲のテキストエリア内の位置を取得しています。

最新のOperaでも動きます。Safariは今のところ使えないと思います。

参考

• http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_textrange.asp
• http://www.teria.com/~koseki/memo/javascript/selection_test.html

*1:はてなユーザの方は、ダイアリー編集フォームの上に並んでいるボタンを使うと、選択範囲末尾の改行が消えてしまう現象なんかを確認できると思います。