1263908522 【ズバリで10,000ポイント差し上げます】javascriptの選択範囲の取得についての質問です。


iframeに読み込まれたファイル「test.html」のテキストを選択した時に
そのテキストの始点と終点を取得する方法を教えてください。
タグも含めた位置を取得したいので、「あいうえお」を選択した時に「始点:0/終点:5」はNGです。
また、始点=終点の場合は「キャレット位置」を取得するようにしたいです。
最終的には選択範囲をタグで囲む、キャレット位置にタグを挿入などを行いますが、その部分は当方で付け加えさせていただきますので、
「get_range()」でアラートするところまでお願いいたします。
尚、IE及びfirefoxの両方で動作するようにお願いいたします。

質問本文の500文字を超えてしまいましたので、続きは添付画像をご覧ください。

回答の条件
  • 1人10回まで
  • 登録:2010/01/19 22:42:04
  • 終了:2010/01/20 11:19:19

回答(1件)

id:HALSPECIAL No.1

HALSPECIAL回答回数407ベストアンサー獲得回数862010/01/20 01:37:36

ポイント60pt

やりたい事はズバリこういった事だと思います。

(始点、終点は数えません)


とみぞーノートより


JavaScript Rangeの使い方

4. サンプルコード その1

実際にRangeオブジェクトを使ったサンプル。

このサンプルはIFRAME内の選択領域にHTMLオブジェクトを挿入する。

IE用コード・Mozilla系用コードあり

実働サンプル:

http://www.bit-hive.com/~tomita/RangeInsert/

JavaScriptのソース:

http://www.bit-hive.com/~tomita/RangeInsert/insert.js


5. サンプルコード その2

選択範囲を指定したタグで囲む処理を行うコード。

IE用コード・Mozilla系用コードあり

実働サンプル:

http://www.bit-hive.com/~tomita/RangeEncap/

JavaScriptのソース:

http://www.bit-hive.com/~tomita/RangeEncap/encap.js

id:clab_yasu

ご回答ありがとうございました。

教えていただきましたページにつきましては「添付画像」及び「私のコメント」に記載されたページでございます。

はてなのシステム上、500文字を超える質問ができませんでしたので、添付画像とコメントを使わせていただきました。

「とみぞーノート」の方法では「タグの削除」ができないように思います。(私の知識では)

ズバリの回答はコメントに記載させていただきました通り、プログラムの完成にてよろしくお願いいたします。

2010/01/20 08:16:53
  • id:clab_yasu
    添付画像がリサイズで読めなくなってしまいましたのでこちらに記載します。

    以下参考です。

    【参考にしたページ/1】
    http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20Range%A4%CE%BB%C8%A4%A4%CA%FD
    【参考にしたページ/2】
    http://archiva.jp/web/javascript/getRange_in_textarea.html

    参考にしたページ(2)はイメージにかなり近いのですが、選択範囲を取得する対象が「iframe」でないことと
    「挿入したタグ」を削除することができない為、断念しました。

    簡単なhtmlを記述しました。
    こちらをベースに完成していただけると幸いです。

    ●ここから-----------------------------------------------------------------------------
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
    <script type="text/javascript">

    //designModeの設定
    onload = function() {
    if (document.all) {
    doc = frames[0].document;
    } else {
    doc = document.getElementById("edit").contentDocument;
    }
    doc.designMode = "on";
    }


    //始点と終点を取得
    function get_range() {
    alert("");
    }

    </script>
    </head>
    <body>
    <a href="javascript:get_range()">始点と終点を取得</a>
    <br>
    <iframe id="edit" width="500px" src="test.html"></iframe>
    </body>
    </html>
    ●ここまで-----------------------------------------------------------------------------

    ●test.html-----------------------------------------------------------------------------

    <div id="test">あいうえお</div>

    --------------------------------------------------------------------------------------------
  • id:edvakf
    iframe の HTML は自分が用意するものですか? ドメインは親 HTML と同じですか?

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません