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

このQ&Aのポイント
  • javascriptでテキストエリアの選択範囲を設定したく、http://d.hatena.ne.jp/language_and_engineering/20090225/p1を参考に試験しましたが、正しく選択範囲が設定されません。どこが悪いのでしょうか?
  • 正しく選択範囲が設定されるサンプルがあれば、ご教示いただければありがたいです。
  • IEでテキストエリアの選択範囲を設定する方法について詳しく教えてください。
回答を見る
  • ベストアンサー

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

IEで,テキストエリアの選択範囲を設定する方法 お世話になります。 javascriptでテキストエリアの選択範囲を設定したく、 http://d.hatena.ne.jp/language_and_engineering/20090225/p1 を参考に以下のような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>

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

というわけで、マルチブラウザー対応 <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>

kahata
質問者

お礼

いろいろ調べましたが、以下のツールで処理するのが手っ取り早いようです http://plugins.jquery.com/project/a-tools

kahata
質問者

補足

ご検討ありがとうございます。 ANo.1の自動改行削除バージョンですね。 しかしこの方法はtextareaの内容が書き換えられます。 当方の質問が説明不足であったかもしれません。 質問の趣旨は「(日本語)の文字位置」で選択したいのではなく、start,endをいわばポインタ的に指定して、textareaの内容を保持したまま、 「     かきくけこ さしすせそ」 を改行付きで選択したいということで、そのためには setSelection(elem,5,17); にすべきでした。 この目的は http://www.teria.com/~koseki/memo/xbselection/example.html のget selectionとペアにして、textareaに簡単な自動編集機能を付与することです。 ではまたよろしくお願いします。

その他の回答 (3)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

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

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

IE以外なら、 <script type="text/javascript"> function select(start,end){ var elem = document.getElementById("my_input"); elem.setSelectionRange(start,end); } </script> <textarea id='my_input'> あいうえおかきこけこ さしすせそたちつてと なににねのはひふへほ </textarea> <button onclick='select(5,15);'>Select</button> でOK

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

<textarea id="my_input" cols=50 rows=10> あいうえおかきこけこ さしすせそたちつてと なににねのはひふへほ </textarea>  の記述がまずい。(lengthが36です。改行文字も数えられてしまいます。) <textarea id="my_input" cols=50 rows=10>あいうえおかきこけこさしすせそたちつてとなににねのはひふへほ</textarea>    と書けば全体で30文字でlengthも30になります。

kahata
質問者

補足

レスありがありがとうございます。 おっしゃるとおり改行を全部取り去って1行にすれば参考例の<input>同じでうまくいきますが、通常<textarea>で一行にすることはまずありません。 選択範囲取得のほうは、以下のサイトで確認すると http://www.teria.com/~koseki/memo/xbselection/example.html 改行があっても、改行を2文字と数えてうまく選択範囲が取得されます。 改行を含むtextareaで正しく選択範囲を設定する方法をご教示いただきたく、よろしくお願いします。

関連するQ&A

  • 選択範囲について

    ある範囲を選択したいのですが。 選択開始セルは決まっているのですが選択終了のセルが変化するので、そのアドレスを変数に入れて設定してみたのですがエラーがでてしまいます。 こういうときはどうすれば上手くできるのでしょうか? 変数1 = ActiveCell.Offset(0, 10).Address(RowAbsolute:=False, ColumnAbsolute:=False) Range("B4:末尾").Select

  • テキストボックスに文字列やタグを挿入する方法

    テキストボックスのカーソルで選択した部分に文字列、もしくはタグを挿入させたいのですが、 例えば あいう|えお|でえおの部分をカーソルで選択して、何かボタンなどを押下すると自動で あいう<s>えお<s>といった具合にタグを挿入してほしいのです。 ホームページで調べたところ、 テキストエリアで実現する方法が下のURLでみつけたのですが、 http://archiva.jp/web/javascript/getRange_in_textarea.html テキストボックスで実行したいのですが、上の方法ではうまくいきません。 テキストボックスの場合どうすればいいのでしょうか? どなたか回答よろしくお願いいたします。 また、上のホームページで使われているJavaScriptを載せます。 function surroundHTML(tag, obj) { var target = document.getElementById(obj); var pos = getAreaRange(target); var val = target.value; var range = val.slice(pos.start, pos.end); var beforeNode = val.slice(0, pos.start); var afterNode = val.slice(pos.end); var insertNode; if (range || pos.start != pos.end) { insertNode = '<' + tag + '>' + range + '</' + tag + '>'; target.value = beforeNode + insertNode + afterNode; } else if (pos.start == pos.end) { insertNode = '<' + tag + '>' + '</' + tag + '>'; target.value = beforeNode + insertNode + afterNode; } } function getAreaRange(obj) { var pos = new Object(); if (isIE) { obj.focus(); var range = document.selection.createRange(); var clone = range.duplicate(); clone.moveToElementText(obj); clone.setEndPoint('EndToEnd', range); pos.start = clone.text.length - range.text.length; pos.end = clone.text.length - range.text.length + range.text.length; } else if (window.getSelection()) { pos.start = obj.selectionStart; pos.end = obj.selectionEnd; } return pos; alert(pos.start + "," + pos.end); } var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer') + 1 ? 1 : 0);

  • IE5でテキストの選択範囲を文字単位にしたいのですが

    Windows NTとMe上の IE5.0なのですが、表示されているテキストやFORMの INPUTのテキストの一部をマウスで反転させようとすると、ボタンを押してマウスを 動かした部分より広い範囲(英語なら単語単位)が選択されてしまいます。 思った通りの範囲が選択できないのは不便で仕方がないので、この機能をOFFにして 文字単位で反転できるようにしたいのですが、オプションの中に設定が見つかり ません。どうしたら変更できるのでしょうか?

  • テキストエリア内で改行するには。

    次のスクリプトを実行すると、テキストエリア内に 01234560 と数字が表示されますが、これを 0 1 2 . というように改行も含めてテキストエリアに出力するにはどうすればよいでしょうか。 ¥nという文字を使用するのでしょうか? <html> <head> <script language="JavaScript"> <!-- var textA="" function my1() {for (i=0;i<11;i++){textA=textA+new String(i)} document.form1.text1.value=textA;} //--> </script> </head> <body> <form name="form1"> <textarea name="text1" size="10"></textarea> <input type="button" value="CLICK!" onClick="my1();"> </form> </body> </html>

  • ボタンを押してテキストエリアの内容をクリアする方法

    自分のHPにテキスト翻訳機能をつけようと思い Google language APIを利用したサイトに習い以下のように 作ってみました。(ソース提供してあった場所からいただきました) この中にはリセットボタンがなかったので自分でつけてみたのですが、 テキストエリアの内容をうまくクリアする方法がわかりません。 リセットボタンを押したら左右両方のテキストエリアの内容をクリア したいのです。 おそらく scriptのところにfunction reset()という内容を つけなければならないのではと言うところまでは分かるのですが。 私のレベルには限界がありますので、どうぞよろしくご教授ください。 スクリプトを貼ります。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"></meta> <style type="text/css"> textarea { height: 50px; width: 250px } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("language", "1"); // 画面初期化時に言語選択ボックスを作成する function init() { var langList = document.getElementById("target-language"); // (1) Language APIで使える言語をループしてリストに表示 for (var lang in google.language.Languages) { var langOpt = new Option(lang, google.language.Languages[lang]); langList.options[langList.options.length] = langOpt; } } // body.onload時にinit()が呼ばれるようにする google.setOnLoadCallback(init); function translate() { var source = document.getElementById("source").value; // (2) 入力された文字列から、言語を自動的に判別する google.language.detect(source, function(detectResult) { if (detectResult.error) { alert("Error:" + error.message); return; } // 選択されている言語を取得 var langList = document.getElementById("target-language"); targetLang = langList.options[langList.selectedIndex].value; // 翻訳 google.language.translate( source, detectResult.language, targetLang, function(result) { if (result.error) { alert("Error:" + result.message); return; } document.getElementById("result").value = result.translation; }); }); } </script> </head> <body> <center> <textarea id="source"></textarea> <textarea id="result"></textarea><br> Translate into <select id="target-language"></select> <button onclick="translate()">Translate</button> <button onclick="reset()">Reset</button> </center> </body> </html>

  • shiftを使った範囲選択が出来ない?!

    OSはVistaで、 IEとSleipnirの両方で下記の現象が起きています。 例えば「Shift + End 行の末尾まで」を選択しようとしても、 画面は確かに動くのに青く反転していません。 先ほどマウスで大雑把に選んだ範囲を修正しようとshiftと→を押してみたのですが、 何も反応していないので気がつきました。 つい最近まではきちんと選ぶことが出来たと思うのですが、 自分で気がつかないうちに何か設定の変更をしてしまったのでしょうか。 検索しても、範囲選択の仕方はあっても、出来なくなったものを戻す方法が見つかりません。 お手数をおかけしますが、ご回答のほどよろしくお願いいたします。 なお、メモ帳で試してみたところ普通にshiftを使った選択は可能でした。

  • エクセルVBAでグラフの範囲を設定する方法

    お世話になっています。 グラフ自体は、作成済みのものを使用して、データの範囲だけを 変更させる方法を考えています。 A列に、データが入っている範囲を選択して、選択したセル範囲を グラフのデータ範囲としたいと思います。 現在、作成したプログラムは以下のものです。 当たり前なんでしょうが、以下のものではエラーになります。 Loopコマンドで、アクティブになったセルをグラフのデータ範囲に 設定する方法を教えてください。 よろしくお願いします。 Sub グラフ作成() ' Dim 範囲 As String Range("A1").Select Do Until ActiveCell = "" ActiveCell.Offset(1, 0).Activate Loop ActiveCell.Offset(-1, 0).Activate Range(Selection, Selection.End(xlToRight)).Select Range(Selection, Selection.End(xlUp)).Select   範囲 = ActiveCell ActiveSheet.ChartObjects("グラフ 1").Activate ActiveChart.SetSourceData Source:=Range(範囲) End Sub

  • テキストエリアの選択行番号を返す関数

    下記のようなJavaScriptで、削除ボタンが押されたときにテキストエリアの何行目が 選択されているかを返す関数を作成途中なのですが、残りの部分がわかりません。 どうすれば、実現できるのか教えていただけないでしょうか。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ホームバンキング</title> <script language="javascript"> <!-- document.form1.display.focus(); // テキストエリアにまずフォーカスを与える function select_row(){ // テキストエリアの何行目がクリックされているかを返す関数 var textarea = document.getElementById('display'); // テキストエリアのHTMLエンティティを取得 for(var i=0; i<textarea.length; i++){ if() break; // テキストエリアのi行目が選択されていたら、 } //document.form1.display.select(); // テキストエリアを選択状態にする return i; } //--> </script> </head>

  • テキストエリア文字制限について

    テキストエリア文字制限について 失礼します。 javascript初心者です。 複数のテキストエリアの文字制限を行いたく 苦戦しております。 いろいろと検索してみましたが・・・ 2日ほど悩んでおります。 AとBでエラーが出た場合はCGIに流れず入力フォームに戻るのですが Bでエラーが発生しない場合CGIに流れてしまいます。 ですの文字数制限をしても結局CGIに流れてしまうのですが どのように記述すればよろしいでしょうか?? なんとか・・・ご教授いただければ幸いです。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>入力文字数の制限</title> <script language="javascript" type="text/javascript"> <!-- var MAXLENGTH = 10; //入力許容最大文字数 function tareachk(frm){ var tmp = frm.vin1.value; var len = tmp.length; if(len > MAXLENGTH){alert("A入力可能な文字数は"+MAXLENGTH+"文字までです");} var tmp = frm.vin2.value; var len = tmp.length; if(len > MAXLENGTH){alert("B入力可能な文字数は"+MAXLENGTH+"文字までです");} else{frm.submit();} } // --> </script> </head> <body> <form action="ccccc.cgi" method="post"> <textarea name="vin1" rows="5" cols="30">10文字まで入力可能</textarea><br> <textarea name="vin2" rows="5" cols="30">10文字まで入力可能</textarea><br> <input type="button" value="GO" onclick="tareachk(this.form);"> </form> </body> </html>

  • EXCELマクロ、範囲選択はできたものの・・・

    こんにちは。 Wendy02さんはじめ、みなさんのお力をお借りして、 できあがりまじかのグラフですが、恥を承知で教えて ください。 教えてもらったマクロ Sub getMyRange3() Dim r As Range  With ActiveSheet.Range("A1").CurrentRegion    Set r = Cells(65536, .Cells(.Cells.Count).Column).End(xlUp)   Range("A1", r).Select  End With  Set r = Nothing End Sub ****************** ・データ範囲には0が存在する場合がある。 ・末尾データの0は範囲には入れない のことを考慮すると、期待の範囲がとれません。 オートフィルタでの処理も考えましたが、必要な 0までもフィルタされます。 ****************** masa_peeさんの作られたデータサンプルをお借りすると データ的には、    A  B  1 あ 13  2 い  0  3 う 60  4 え 52  5 お  0  6 か  0 というデータのなかで欲しい範囲は、A1からB4です

専門家に質問してみよう