<form action="#" onsubmit="change(); return(false); ">
    <p><textarea rows="4" cols="32" name="tx">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよ</textarea></p>
    <p><input type="submit" value="表示" /> <input type="text" name="gs" value="" /></p>
    </form>

ここで、選択の対象となっている入力欄(<textarea>要素)には tx と言う名前がname属性で与えられているものとします。

また、gs と言う名前が与えられている<input>要素は、結果を出力するためのものです。

本頁の目次

JAVAスクリプトでの記述。(平成19年 8月17日更新)

記事の先頭
前項目に戻る
次項目に進む

一方、JAVAスクリプト側「GetSelectedTextInForm.js」では、以下のように記述されております。

読み飛ばす

function change() {
    if (navigator.userAgent.indexOf('Opera/7.')>-1 ||
        navigator.userAgent.indexOf('Opera 7.')>-1 ||
        navigator.userAgent.indexOf('Opera/6.')>-1 ||
        navigator.userAgent.indexOf('Opera 6.')>-1)
        document.forms[0].gs.value='情報が取得出来ません';
    else if (document.all && !window.opera) {
        document.forms[0].tx.focus();
        document.forms[0].gs.value=document.selection.createRange().text;
        }
    else if (document.getElementById) {
        s=document.forms[0].tx.selectionStart;
        if (s!=0 || s=='0') {
            e=document.forms[0].tx.selectionEnd;
            document.forms[0].gs.value=document.forms[0].tx.value.substring(s,e);
            }
        else document.forms[0].gs.value='';
        }
    else document.forms[0].gs.value='情報が取得出来ません';
    }

JAVAスクリプトの処理の流れは以下のようになります。

オペラ 6.x～7.xではエラーとします。
インターネットエクスプローラでは、独自仕様の
```
document.selection.createRange().text
```
で、選択されているテキストをフォーム入力欄 gs に書き出します。

但し、単純にこの方法を採ると、フォーム外のテキストを反転させていた場合にそのテキストをそのまま拾ってしまいます。

そこで、document.selection.createRange().textでテキストを取得する前に、
```
document.forms[0].tx.focus();
```
でフォーム入力欄 tx にフォーカスを移します。
- フォーム入力欄 tx にフォーカスが移されたため、フォーム外のテキストが選択されていても無効となります。
その他の標準準拠ユーザエージェントでは、
1. フォーム入力欄 tx 内での選択開始地点 s を selectionStartプロパティで取得し、有効な値であれば、選択終了地点 e を selectionEndプロパティで取得します。
2. 続いて、フォーム入力欄 tx の内容を substring()メソッドを用いて当該区間を取り出し、それをフォーム入力欄 gs に書き出します。
その他は標準準拠でないのでエラーとします。

本頁の目次

どのような場合に使えるか？でも解説した通り、実際にはフォームの入力欄に入れられた文字列を何らかの形で加工するのに利用する事が多いと思われます。

この用途の場合、当該フォームの入力データは加工された結果に置き換えられる必要があります。

加工した結果を反映させるには、以下のようになります。

インターネットエクスプローラの場合

加工した文字列を、読み出したプロパティ

document.selection.createRange().text

に代入するだけで、当該箇所が変更されます。

つまり、このプロパティは読み出しだけでなく、書き込みも意味を持ちます。

尚、このとき、選択された部分の前後については考慮する必要はありません。

その他の標準準拠ユーザエージェントの場合

加工したものを当該入力欄のオブジェクトに代入する事になります。

このとき、代入すべき値は

選択箇所より前の入力欄内の文字列 + 加工した文字列 + 選択箇所より後ろの入力欄内の文字列

となります。

つまり、選択部分の前後の内容も併せて代入しないといけません。

選択箇所前後の文字列はsubstring()メソッドで切り出す事が出来ます。

本頁の目次

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com

ページ案内 ▼

フォーム内の選択されたテキストを取得するスクリプト。

フォーム内の選択されたテキストを取得するスクリプト・目次。

どのような場合に使えるか？

フォーム内の選択されたテキストを取得するには。

フォーム内の選択されたテキストを取得するサンプル。

実際のスクリプト。(平成19年 8月17日更新)

HTML側の記述。

JAVAスクリプトでの記述。(平成19年 8月17日更新)

実際に利用する場合。 (平成18年11月10日追記)

しらぎくのウェブサイト作成入門サイトマップ