JavaScriptを使って選んだ文字列を表示させる方法
- JavaScriptを使用して、同じページ内にドラッグで選んだ文字列を抜き出して表示させる方法について説明します。
- 質問文章では、document.selection.createRange()メソッドを使用して、選択した文字列を取得して表示させていますが、うまく動作しないようです。
- アドバイスとしては、document.getSelection()メソッドを使用することをおすすめします。
- ベストアンサー
選んだ文字列を表示させる方法について
JavaScriptを使って,ドラッグで選んだ文字列を，同じページ内に，抜き出して表示させることを考えています。 いろいろなページを参考にして,以下のように作ってみましたが,どうもうまく動きません。 具体的には,文字を選ぶと[object]と表示されてしまいます。 アドバイスをお願いします。 <html lang="ja"> <head> <script type="text/javascript"> function doAlert(){ if(document.all){ var s = new String; s=document.selection.createRange(); if (document.all) { his.innerHTML = s; } else if ( document.layers ) { document.his.document.open(); document.his.document.write(s); document.his.document.close(); } }else if(document.getElementById){ s=window.getSelection(); document.write(s); } } document.onmouseup=doAlert; </script> </head> <body> <div id="div1" style="font-size:24pt"> 選択してください。 </div> <hr> <DIV id="his" style="position: absolute;"> <P>上の文をドラッグすると，ここに選んだ文字列が表示されます</P> <hr> </DIV> </body> </html>
- f0011048
- お礼率58% (17/29)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
sはレンジオブジェクトなので、その文字列を使うには sとして使っている処をs.textにして下さい。 例 his.innerHTML = s.text;
関連するQ&A
- 文字を一文字ずつ表示
JavaScriptで文字を一文字ずつ表示するサンプルを見つけ、使おうとしたところdocument.allが使われていた為、ネスケで対応できない事が分かりました。ネスケ4.7で対応するようにするにはどのように変えたらいいのか教えて頂きたく宜しくお願いいたします。 <SCRIPT Language="JavaScript"> <!-- var msg="Welcome!!"; i=0; function Start(){ if(i<=msg.length){ if(document.all){ myText.innerHTML = msg.substring(0,i); }else if(document.layers){ document.myText.document.open(); document.myText.document.write(msg.substring(0,i)); document.myText.document.close(); } i=++i; setTimeout("Start()",200); }else{ i=0; setTimeout("Start()",1000); } } // --> </SCRIPT> </HEAD> <BODY onLoad="Start()"> <DIV id="myText"></DIV> </BODY> 宜しくお願い致します。
- ベストアンサー
- JavaScript
- このタグで文字の大きさを変えたいのですが、、、、
<head> <title>文字色をリアルタイムに変える</title> <script Language="JavaScript"><!-- count = 0; function changeColor(str) { txt = document.all["strID"].innerText; c = str.charAt(count); txt = txt.fontcolor("#"+c+c+"0000"); document.all["strID"].innerHTML = txt; count++; if (count > str.length) count = 0; setTimeout("changeColor('"+str+"')",100); } // --></script> </head> <body onLoad="changeColor('0123456789abcdefedcba987654321')"> <div id="strID" style="font-weight:900">ここの文字の色が変わるよ～ん</div> </body>
- ベストアンサー
- HTML
- 文字をスクロールさせる
過去の質問で探しはしたのですが、良い解答が見つかりませんでした。 文字を下から上にスクロールさせたいんですが、ちょっと変わってます。質問は二つです。 １：スクロールする範囲を指定したい。 ２：スクロールはループになっているのだが、ループごとに違うメッセージにしたい。 の二つです。今のところプログラムは <html> <head> <title><title> <script Language="JavaScript"> <!--------------------------- function Tscroll() { y -= 2; document.all["whatNew"].style.top = y; if (y == 100) { setTimeout('Tscroll()',1500); } else if (y > 76) setTimeout('Tscroll()',100); else { //文字書換 y = 124; setTimeout('Tscroll()',100); } return true; } function Tbase() { cnt = 0; y = 124; setTimeout('Tscroll()',100); return true; } //---------------------------------> </script> </head> <body onLoad="Tbase()"> <script Language="JavaScript"> <!--------------------------- st = "ニャぁニャぁ"; document.write("<div id = 'whatNew' style = 'position:absolute;top:124px;'>"); document.write(""+st+""); document.write("</div>"); //---------------------------------> </script> </body> </html> 最終的なイメージとしては、一行幅の枠(実際に枠を作るわけではない)の中で 文字が、下から上にスクロールし、一行枠に文字がきちんとおさまったら 一旦停止。その後上へ消えていく。 すると今度は下から別の文字が来て同じような事を繰り返す。 せめて、divの書き換えの方法や属性等がわかれば、自分でどうにかできると思うんですが・・・
- ベストアンサー
- JavaScript
- このタグの文字サイズを大きくしたいのですが、、、
<head> <title>１文字づつ画面上に出力する</title> <script language="JavaScript"><!-- str = "Sample text...(^^)/ By KaZuhiro FuRuhata"; count = 0; function setText1() { if (count > str.length) return; count++; txt = str.substring(0,count); if (document.all) document.all["outText"].innerHTML = txt; if (document.layers) { document.layers["outText"].document.open(); document.layers["outText"].document.write(txt); document.layers["outText"].document.close(); } setTimeout("setText1()",100); } // --></script> </head> <body> <a href="javaScript:setText1()">出力開始</a> <div id="outText" style="position:absolute;top:50px;left:5px;"></div> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- 文字列の表示/非表示
下記のコードで、ボタンを押すたびに、 sample1 sample2 sample3 の３個の文字列の非表示/表示が切り替わるようにしたいのですが、 alert(elements.length+"個の要素を取得しました"); の実行で、class="sample"のエレメントの個数は正しく取得できているようなのですが、 elements.style.display = elements.style.display == "none" ? "block" : "none"; で非表示/表示が切り替わってくれません。 何か書き方が悪いのでしょうか？ ご経験のある方、御教示ください。 <html> <head> <title>document.getElementsByClassName - class名を元にエレメントを取得する</title> </head> <!--class名を元にエレメントを取得するのサンプル--> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function execute() { var elements = document.getElementsByClassName("sample"); alert(elements.length+"個の要素を取得しました"); elements.style.display = elements.style.display == "none" ? "block" : "none"; } //--> </script> <body> <div id="sample1" class="sample" style="display:none;">sample1</div> <div id="sample2" class="sample" style="display:none;">sample2</div> <div id="sample3" class="sample" style="display:none;">sample3</div> <button onclick="execute()">サンプル実行</button> </body> </html>
- ベストアンサー
- JavaScript
- XHTMLとJavascript・CSSで表示位置の固定方法について
HTMLからXHTMLへソースをそのままで移行したら位置の固定がされなくなりました。 <div id="msg">message</div>の部分をスクロールしても常に同じ場所に表示したいです。 XHTMLの知識が殆どなく、原因が判りません。 Javascriptを別ファイルにしても動きませんでした。 修正方法、もしくは代替案をお願いします。 宜しくお願いいたします <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <script type="text/javascript"> var offX = 0; var offY = 0; function setMenu(){ if(document.all){ var mx = parseInt(document.body.scrollLeft+offX); var my = parseInt(document.body.scrollTop+offY); } else { var mx = parseInt(self.pageXOffset+offX); var my = parseInt(self.pageYOffset+offY); } if(document.getElementById){ document.getElementById('msg').style.left=mx; document.getElementById('msg').style.top=my; }else if(document.all){ document.all('msg').style.pixelLeft=mx; document.all('msg').style.pixelTop=my; }else if(document.layers){ document.layers['msg'].moveTo(mx,my); } } onscroll = setMenu; onresize=setMenu; //--> </script></head> <body bgcolor="#111144"> <div id="msg"> message </div> </body> </html>
- ベストアンサー
- JavaScript
- これは何をするスクリプトですか？
<head> <script type="text/javascript"> <!-- function loading() { if (document.getElementById){ document.getElementById('load').style.visibility = 'hidden'; } else { if (document.layers){ document.layers['load'].visibility = 'hidden'; } else { document.all('load').style.visibility = 'hidden'; }}} // --> </script> </head> <body onload="loading()"> 詳細は略して書いています。 プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。 皆様には簡単かとは思いますが、よろしくお願いします。
- ベストアンサー
- JavaScript
- 文字の大きさや色の変更
よろしくお願いします。 時刻表示のスクリプトを使いたいのですが 設置したいページにタグを貼ると 色や文字の大きさはページにセットしてあるスタイルシートで揃えることが出来るのですが 他のスクリプトと競合？を起こしてしまい動かないものが出てきました。 そこで時刻表示の部分だけインラインフレームで表示したいため色や文字の大きさなどを追加しようと思いますがエラーばかり出てしまい困っています。 スクリプトは <html> <head> </head> <body onload="tokeiFunc()"> <SCRIPT Language="JavaScript"> <!-- if (navigator.appName == "Microsoft Internet Explorer") myApp="IE"; else if (navigator.appName == "Netscape") myApp="NN"; else myApp=""; myVer = navigator.appVersion.charAt(0); function tokeiFunc(){ myD=new Date(); myTime= myD.getHours()+"時"+myD.getMinutes()+"分"; myMsg = myTime; if ((myApp == "IE") && (myVer >= 4)){ document.all("myIDdate").innerHTML = myMsg; }else if ((myApp == "NN") && (myVer >= 4)) { document.layers["myIDdate"].document.open(); document.layers["myIDdate"].document.write(myMsg); document.layers["myIDdate"].document.close(); } setTimeout("tokeiFunc()",1000); } // --> </script> <div ID="myIDdate" STYLE="position:absolute"></div> この中のどこを書き加えればよいのでしょうか？ また、競合を起こしてしまう場合呼び出す名前？を別のものにしてやればいいということを聞いたことがありますがどれが名前になるのか、変更する名前は何でもいいのか、そのへんがよく分かりません。こういうことが実際出来るのでしょうか？ お知恵をお貸しください。よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScript表示切替の問題
ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- 文字列を点滅させたい
JavaScriptを勉強しているのですが、文字を点滅させたいので下記の様なプログラム作成したのですがELSE文に絡む事ができません。 どうして動作しないのか？わからず投稿しました。 どうすればよいのでしょうか？ 宜しくお願い致します。 <script language="JavaScript" type="text/javascript"> <!-- var flg=1; function test() { if (flg==1) { document.write("元気？"); flg=0; }else{ document.write(""); flg=1; } setTimeout("test()",2000); } // --> </script> <BODY onLoad="test()"></BODY>
- ベストアンサー
- JavaScript
お礼
s.textとしたところ、うまく動きました。 適切な回答を、ありがとうございました。 大変助かりました。