IEで，テキストエリアの選択範囲を設定する方法

解決済

質問者：kahata
質問日時：2010/07/09 17:07
回答数：4件

IEで，テキストエリアの選択範囲を設定する方法
お世話になります。
javascriptでテキストエリアの選択範囲を設定したく、
http://d.hatena.ne.jp/language_and_engineering/2 …
を参考に以下のようなhtmlを試験したのですが、正しく選択範囲が設定されません。
コーディングはShift_JIS、改行はCRLFです。
どこが悪いのでしょうか？
正しく選択範囲が設定されるサンプルがあれば、ご教示いただければありがたいです
よろしくお願いします。

<html>
<textarea id="my_input" cols=50 rows=10>
あいうえおかきこけこ
さしすせそたちつてと
なににねのはひふへほ
</textarea>
<input type="button" onclick="f()" value="選択">
<script language="JavaScript">
function f()
{
var elem = document.getElementById( "my_input" );
setSelectionIE( elem, 5, 15 ); //かきくけこさしすせそが選択されない
}
// 要素内の文字列を選択状態にする関数
// start, end : 選択したい文字列の開始地点と終了地点。（先頭からの文字数）
function setSelectionIE( elem, start, end )
{
// 終了地点を，末尾から数えた負の文字数に変換
var end_new = - ( elem.value.length - end );

// 範囲生成
var range = elem.createTextRange();
range.moveStart( "character", start ); // 先頭から数えた開始地点
range.moveEnd( "character", end_new ); // 末尾から数えた開始地点

// 選択
range.select();
}
</script>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.1

回答者： yyr446
回答日時：2010/07/09 18:00

＜textarea id="my_input" cols=50 rows=10＞

あいうえおかきこけこ
さしすせそたちつてと
なににねのはひふへほ
＜/textarea＞

　の記述がまずい。（lengthが36です。改行文字も数えられてしまいます。）

＜textarea id="my_input" cols=50 rows=10＞あいうえおかきこけこさしすせそたちつてとなににねのはひふへほ＜/textarea＞
　
　と書けば全体で30文字でlengthも30になります。

この回答への補足

レスありがありがとうございます。
おっしゃるとおり改行を全部取り去って1行にすれば参考例の＜input＞同じでうまくいきますが、通常＜textarea＞で一行にすることはまずありません。
選択範囲取得のほうは、以下のサイトで確認すると

http://www.teria.com/~koseki/memo/xbselection/ex …

改行があっても、改行を2文字と数えてうまく選択範囲が取得されます。
改行を含むtextareaで正しく選択範囲を設定する方法をご教示いただきたく、よろしくお願いします。

補足日時：2010/07/11 10:17

通報する

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2010/07/12 15:08

IE以外なら、

- 0
- 件

通報する

No.3

回答者： yyr446
回答日時：2010/07/12 15:52

訂正

//IE以外
function select(start,end){
var elem = document.getElementById("my_input");
elem.value.replace(/\s/g,'');
elem.setSelectionRange(start,end);
}

- 0
- 件

通報する

No.4ベストアンサー

回答者： yyr446
回答日時：2010/07/12 16:06

というわけで、マルチブラウザー対応

<textarea id="my_input" cols=50 rows=10>
あいうえおかきこけこ
さしすせそたちつてと
なににねのはひふへほ
</textarea>
<input type="button" onclick="f()" value="選択">
<script type="text/javascript">
function f(){
var elem = document.getElementById( "my_input" );
　setSelection(elem,5,15);
}
function setSelection(elem,start,end){
　elem.value=elem.value.replace(/\s/g,'');
　try{
　 elem.setSelectionRange(start,end);
　}catch(e){
　 var end_new = - ( elem.value.length - end );
　 var range = elem.createTextRange();
　 range.moveStart( "character", start );
　 range.moveEnd( "character", end_new );
　 range.select();
　}
}
</script>

この回答への補足

ご検討ありがとうございます。
ANo.1の自動改行削除バージョンですね。

しかしこの方法はtextareaの内容が書き換えられます。

当方の質問が説明不足であったかもしれません。
質問の趣旨は「(日本語)の文字位置」で選択したいのではなく、start,endをいわばポインタ的に指定して、textareaの内容を保持したまま、
「　　　　　かきくけこ
さしすせそ」
を改行付きで選択したいということで、そのためには
setSelection(elem,5,17);
にすべきでした。

この目的は
http://www.teria.com/~koseki/memo/xbselection/ex …
のget selectionとペアにして、textareaに簡単な自動編集機能を付与することです。

ではまたよろしくお願いします。