選択範囲の取得と設定(JavaScript)
- IEとFirefoxで選択範囲の取得と設定する方法について教えてください
- ユーザーが要素を選択してボタンAを押すと、選択範囲の開始位置と終了位置を変数に保存します
- 選択が解除されてボタンBを押すと、保存された選択範囲を元に文書内の該当部分を選択できます
- ベストアンサー
選択範囲の取得と設定(JavaScript)
選択範囲の取得と設定(JavaScript) IEとFirefoxで次のような処理をしたいです。 1.ユーザーが(テキストエリアではなくbody内の要素を)選択してボタンAを押す。 →変数に選択開始位置を終了位置を入れる。 2.選択が解除してボタンBを押す。 →変数の選択位置をもとに文書内の該当部分を選択。 http://d.hatena.ne.jp/language_and_engineering/20090225/p1 が参考になりそうかなと思いましたがIEもFirefoxもわかりません。 とくにFirefoxはdocument.body.selectionStartとかが使えなくてできませんでした。 どうやるか教えてください。 よろしくお願いします。
- tomotomo1008
- お礼率60% (14/23)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Selection</title> <p><a>月日</a>は<a>白代</a>の<a>過客</a>にして<a>行き交う</a><a>年</a>も<a>旅人</a>なり。</p> <p> <input type="button" value="記憶" onmousedown="A(this.ownerDocument);"> <input type="button" value="復元" onmousedown="B(this.ownerDocument);"> </p> <script type="text/javascript"> var R = null; var A = new Function; var B = new Function; // DOM-HTML5 (from Gecko) if (document.defaultView && document.defaultView.getSelection) A = function(doc) { var s = doc.defaultView.getSelection(); if (! s.isCollapsed) R = s.getRangeAt(0); }, B = function(doc) { if (R) { var s = doc.defaultView.getSelection(); s.removeAllRanges(); s.addRange(R); } }; // MSHTML (IE5+) else if (document.selection && document.selection.createRange) A = function(doc) { var r = doc.selection.createRange(); if (r.text.length > 0) R = r; }, B = function(doc) { if (R) R.select(); }; </script>
その他の回答 (1)
- nekomikekamo
- ベストアンサー率73% (71/97)
firefox、safari、Chromeのみですが(IEは頑張ってください) var ranges = []; var selection = function(){ if (window.getSelection) { return window.getSelection(); } else { if (document.getSelection) { return document.getSelection(); } else { if (document.selection) { return document.selection; } } } }; //現在の選択内容をrangesに保持し、選択を解除 var clear_select = function(){ var sel = selection(); if(sel.removeAllRanges){ //範囲の保持 for(var i = 0; i < sel.rangeCount; i++) { ranges[i] = sel.getRangeAt(i); } sel.removeAllRanges(); } else{ //ie if(sel.empty) { ranges = sel.createRange(); sel.empty(); } } }; //rangesを元に選択を復帰。 var re_select = function(){ var sel = selection(); clear_select(); if(sel.addRange){ for(var i = 0; i < ranges.length; i++) { sel.addRange(ranges[i]); } ranges = []; }else{ //ie用。。。。 } };
関連するQ&A
- JavaScriptが動きません
下記のようなJavaScriptを作りましたが、IE8ではボタンを押しても「ようこそJavaScriptへ」が表示されません。 「F12 Web開発者ツール」というのをチョッとイジったのですが、その為ではないかと思います。 どこをどうイジったか覚えてません。 どうすれば動作するようになるでしょうか、教えてください。 動作状況 サーバーに置いてアクセスした場合は、「FireFox」「IE8」とも表示される。 ローカルデスクに置いてアクセスした場合は、「FireFox」では表示される、「IE8」では表示されない。 ☆OSはWindowsXP。 ☆IE8のセキュリティ設定で「アクティブスクリプト」は「有効にする」になってます。 ------JavaScript----------- <HTML> <BODY> <FORM> <P> <INPUT TYPE="submit" VALUE="ここを押すとメッセージが表示されます" ONCLICK="HelloWorld()"> </FORM> </BODY> </HTML> <SCRIPT LANGUAGE="JavaScript"> <!--Hide script from no-JavaScript browsers function HelloWorld() { alert("ようこそJavaScriptへ"); } //--> </SCRIPT>
- 締切済み
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- JavaScriptが動作しません。<noscript>の処理も動きません。設定方法を教えていただけないでしょうか(ソース付き)
よろしくお願いします。 Vista、IE8を使っています。 下記のような、htmlをローカルファイルにして確認用に試しています。 通常は、1もしくは2のメッセージが出るはずです。 ただ、手持ちの１つもマシンだけ、なぜか何も表示されません。 何かの設定だと思いますが、どこを疑って良いのかもかわりません。 何か方法を教えていただけないでしょうか？ <html> <head> <title>JavaScriptのオン／オフ状態に応じて表示するメッセージを変える</title> <body> <script Language="JavaScript"> <!-- document.write("1.JavaScript使えますね"); // --> </script> <noscript>2.JavaScriptは使えない状態です・・・</noscript> </body> </html> 下記の設定をしても変わりません。 1．ツールバーの「ツール」から「インターネットオプション」を選択 2．「セキュリティー」タブ→「このゾーンのセキュリティーのレベル」内の「レベルのカスタマイズ」ボタンを選択 3．「スクリプト」内の「アクティブスクリプト」を「有効にする」に選択して「OK」
- 締切済み
- JavaScript
- JavaScriptの値をPHPで取得
こんにちわ。よろしくお願いします。 いま、JavaScriptで取得した値を同一ページ内でPHPの変数に入れることはできないでしょうか？ 例えば <SCRIPT language="JavaScript"> <!-- document.write(document.referrer); // --> </SCRIPT> というのがあったとして これの値をPHPの変数に入れることができればなぁっと考えています。 自分的にには無理っぽいかなって思っているのですが、 もしかしたらなにか方法があるかもしれないと思い 質問させていただきました。 なにか方法がわかる方がいらっしゃいましたらアドバイスお願いします。
- ベストアンサー
- PHP
- Firefox:JavaScriptのsubmit
JavaScriptで、以下のようにsubmitしていますが、 IEではOKで、Firefoxでは「送信開始」ボタンで反応がありません。 Firefoxではどのように書けばよいのでしょうか？ 以下は、テストのため省略できるギリギリまで省略していますので、意味のないスクリプトになってますが、実際にはJavaScriptで空白個所のチェックのロジックを入れています。 <html> <head> <script language="JavaScript"> <!-- function check1(){ document.FORM1.submit(); } ---> </script> </head> <form action='http://hogehoge.jp' method='post' name="FORM1"> <input type='button' value='送信開始' onClick="check1()"> </form> </body> </html>
- ベストアンサー
- JavaScript
- javascriptでid要素の取得について
お世話になります。 最近、javascriptの勉強を始めたたのですが、 以下の違いがよくわかりません。 ------------------------------------------------------- <html> <head><title>Test</titile></head> <body> <div id='wrapper'></div> </body> </html> <script language='javascript'> function aaa() { document.getElementById("wrapper").style.display = "none";//---(1) wrapper.style.display = "none"; //---(2) } </script> (2)は、document等省略してますが、その違いは無視して 頂ければと思います。 (1)でわざわざgetElementByIdを使用してid要素を取得 するメリットがわかりません。 初心者の質問で申し訳ありませんが、よろしくお願い致します。
- 締切済み
- JavaScript
- [javascript][IE] textarea内の改行を消す方法を教えてください。
テキストエリア内の改行をreplaceで除去したいのですが、FireFoxではうまくいくのですがIEではうまく動作しません。 下記のようなソースです。 IEではどのように書けば良いのでしょうか。 <html> <head> <script type="text/javascript" language="javascript"> function change_box(){ temp = document.getElementById("in").value; temp = temp.replace(/\n/g,""); document.getElementById("out").value = temp; } </script> </head> <body> <form> <textarea id="in" rows="3" > 一行目 二行目 三行目 </textarea><br /> <textarea id="out" rows="3" ></textarea><br /> <input type="button" value="変換" onclick="change_box()"> </form> </body> </html>
- ベストアンサー
- JavaScript
- JavaScript内にJavaScriptを読み込む方法
HTML内に <script type="text/javascript" src="main.js"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = '<script language="JavaScript">'; html += 'var url0101 = "url01.xxx.jp";'; html += 'var url02 = "url02.oooo.jp";'; html += '</script>'; html += '<script language="JavaScript" src="http://xxx.xxxx.xxx/test.js"></script>'); html += '<script language="JavaScript">'; html += 'Function01("check")'; html += '</script>'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- JavaScript内にJavaScriptを読み込む方法
HTML内に <script type=\"text/javascript\" src=\"main.js\"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = \'<script language=\"JavaScript\">\'; html += \'var url0101 = \"url01.xxx.jp\";\'; html += \'var url02 = \"url02.oooo.jp\";\'; html += \'</script>\'; html += \'<script language=\"JavaScript\" src=\"http://xxx.xxxx.xxx/test.js\"></script>\'); html += \'<script language=\"JavaScript\">\'; html += \'Function01(\"check\")\'; html += \'</script>\'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- JavaScript document.write 「更新」すると動作しない
JavaScriptを組み込んだサイトを作成しました。 自宅には２台PCがあり、パソコンAのブラウザーはFirefox3.5.3とIE7。 パソコンBのブラウザーはFirefox3.0.13とIE6.02900.5512 xpsp sp3です。 パソコンBのブラウザーで動かすとJavaScriptが正常に動きます。 更新ボタンを押しても正常です。 一方、パソコンAでは、一番最初にPCを起動してブラウザを立ち上げた時は正常に動作しますが、「更新」をすると、下記プログラムの <SCRIPT LANGUAGE=JavaScript1.2>document.write(ABC);</script> のdocument.write(ABC)を読み込んでくれなくなります。 ※下記の例で説明すると「あいうえお」という表示が出なくなります。 なお、document.write(ABC)のABCは、<SCRIPT SRC="http://XXXXXX.XXXX/XXXXX/XXXX.js"></SCRIPT>に格納してあります。（下記参照） 何が原因かご教示いただけますでしょうか？ ｍ（＿ ＿）ｍ よろしくお願い致します。 ------------------------------------------------ ◆本文 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <SCRIPT src="http://XXXXXX.XXXX/XXXXX/XXXX.js"></SCRIPT> </HEAD> <BODY><SCRIPT language="javascript">document.write(ABC);</SCRIPT></BODY> </HTML> ------------------------------------------------ ◆http://XXXXXX.XXXX/XXXXX/XXXX.js の中身 var ABC=' <b>あいうえお</b>';
- 締切済み
- JavaScript
お礼
ありがとうございました。範囲ではなくてレンジそのものを代入できるんですね…。 IEのやり方までわざわざありがとうございます