検索機能付きHTMLにジャンプ機能を追加する方法
- 検索機能を付けたHTMLにジャンプ機能を追加する方法を教えてください。
- 「Search」クリック後に該当箇所にジャンプする機能を付けたいです。
- 具体的な手順やコードの記述を教えていただけると助かります。
- ベストアンサー
検索機能を付けたｈｔｍｌにジャンプ機能を付けたい
いま、下のような状態で作成しています。 <html lung="ja"> <head> <title>参考資料</title> </head> <body> <!--search--> <form method="get" action="" name="search"> <div class="search">キーワード検索（キーワード入力＞「Search」押下）・・・赤く反転したところが、該当箇所です<br /> <input id="search" name="search" size="20" style="width:300px" class="form" /> <input type="hidden" name="mySearch" value="" /> <input type="button" value="Search" class="button" onClick="javascript:doSearch()" /> </div> </form> <pre> ・ ・ ・ </pre> <script type="text/javascript" language="javascript"> <!-- // フォント（font = "" などを指定する） var fontName = ""; // フォントカラー（変更しない場合は、fontColor = "" とする） var fontColor = ""; // フォントサイズ（単位はpx、変更しない場合は 0 を指定する） var fontSize = 0; // 太字（0：太字にしない、1：太字にする） var isBold = 0; // 斜体（0：斜体にしない、1：斜体にする） var isItalic = 0; // 下線（0：下線をつけない、1：下線をつける） var isUnderline = 0; // 背景色（変更しない場合は、backColor = "" とする） var backColor = "#FF8080"; searchWordHighlighting(); function searchWordHighlighting() { if (!document.body.createTextRange) return; var range = document.body.createTextRange(); var searchStr = getSearchStr(); if (searchStr == "") return; range.collapse(true); while (range.findText(searchStr)){ if (fontName != "") range.execCommand("fontName", true, fontName); if (fontSize > 0) range.execCommand("fontSize", true, fontSize); if (fontColor != "") range.execCommand("foreColor", true, fontColor); if (isBold != 0) range.execCommand("bold"); if (isItalic != 0) range.execCommand("italic"); if (isUnderline != 0) range.execCommand("underline"); if (backColor != "") range.execCommand("backColor", false, backColor); range.collapse(false); } } function getSearchStr() { var urlStr = "" + window.location; var baseStr = "mySearch="; var index = urlStr.indexOf(baseStr); if (index == -1) return ""; urlStr = urlStr.split("%25"); urlStr = urlStr.join("%"); return decodeURIComponent((urlStr.substring(index + baseStr.length)).replace("%25", "%")); } function doSearch() { window.document.search.mySearch.value=encodeURIComponent(window.document.search.search.value); window.document.search.submit(); } //--> </script> </body> </html> これに「Serch」クリック後、該当箇所にジャンプする機能を付けたいです。 教えていただければ幸いです。 宜しくお願いします。
- blue-rapis
- お礼率42% (8/19)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
良かったら参考にしてください。 <html lung="ja"> <head> <title>参考資料</title> </head> <body> <!--search--> <form method="get" action="" name="search"> <div class="search">キーワード検索（キーワード入力＞「Search」押下）・・・赤く反転したところが、該当箇所です<br /> <input id="search" name="search" size="20" style="width:300px" onkeyup="nCurrentPos=0" /> <input type="button" value="Search" class="button" onClick="javascript:searchWordHighlighting()" /> </div> </form> <pre id="target"> ・ ・ ・ </pre> <script type="text/javascript" language="javascript"> <!-- // フォント（font = "" などを指定する） var fontName = ""; // フォントカラー（変更しない場合は、fontColor = "" とする） var fontColor = ""; // フォントサイズ（単位はpx、変更しない場合は 0 を指定する） var fontSize = 0; // 太字（0：太字にしない、1：太字にする） var isBold = 0; // 斜体（0：斜体にしない、1：斜体にする） var isItalic = 0; // 下線（0：下線をつけない、1：下線をつける） var isUnderline = 0; // 背景色（変更しない場合は、backColor = "" とする） var backColor = "#FF8080"; var currentBackColor = "#FFFF00"; var defaultCondition = document.all.tags("PRE")[0].outerHTML; var nCurrentPos = 0; function searchWordHighlighting() { //フォントをクリア document.all.tags("PRE")[0].outerHTML = defaultCondition; if (!document.body.createTextRange) return; var range = document.body.createTextRange(); var searchStr = window.document.search.search.value; if (searchStr == "") return; range.collapse(true); var nSerachPos = 0; while (range.findText(searchStr)) { if (fontName != "") range.execCommand("fontName", true, fontName); if (fontSize > 0) range.execCommand("fontSize", true, fontSize); if (fontColor != "") range.execCommand("foreColor", true, fontColor); if (isBold != 0) range.execCommand("bold"); if (isItalic != 0) range.execCommand("italic"); if (isUnderline != 0) range.execCommand("underline"); if (backColor != "") range.execCommand("backColor", false, backColor); if( nSerachPos == nCurrentPos ) { range.execCommand("backColor", false, currentBackColor); range.scrollIntoView(); } nSerachPos++; range.collapse(false); } nCurrentPos++; if( nSerachPos <= nCurrentPos ) nCurrentPos = 0; } //--> </script> </body> </html>
その他の回答 (1)
- my--
- ベストアンサー率89% (91/102)
boundingTopが使えそう。 function searchWordHighlighting() { var boundingTop = 0; ... while (range.findText(searchStr)){ if (boundingTop === 0) boundingTop = range.boundingTop; // 最初に見付かった位置 ... } window.scrollTo(0, boundingTop); // スクロール } boundingTop http://msdn.microsoft.com/ja-jp/library/cc409787.aspx
関連するQ&A
- 検索表示について
このようなプルダウン付きの検索バーを作成しています。 この検索結果をこの検索バーの下に表示させるためにはどうすればいいでしょうか？よろしくお願いします。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> <!-- var site = new Array(); var target = "main"; site[0] = ["Goo", "http://search.goo.ne.jp/web.jsp", "MT", ["from", "USR"], ["IE", "sjis"]]; site[1] = ["Google", "http://www.google.com/search", "q", ["hl", "ja"], ["ie", "Shift_JIS"]]; site[2] = ["Yahoo", "http://search.yahoo.co.jp/bin/search", "p",["ei", "Shift_JIS"]]; window.onload = function() { if (!document.createElement) return; if (document.all && !window.clipboardData && !window.opera) return; // 検索サイトのリストを生成 var select = document.createElement("select"); select.id = "addlist"; for (var i = 0; i < site.length; i++) { var opt = document.createElement("option"); opt.value = i; var str = document.createTextNode(site[i][0]); opt.appendChild(str); select.appendChild(opt); } // デフォルトで選択状態にする場合はその配列番号を option[n] に指定 // select.options[3].selected = true; // 既存の検索フォームにこのドロップダウンを追加 var obj = document.forms[0]; obj.elements[obj.elements.length - 1].value = "検索"; obj.insertBefore(select, obj.elements[1]); // フォームが送信された時に selectSearch() を呼び出す obj.onsubmit = selectSearch; } function jump(){ var url = document.form.select.options[document.form.select.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } function selectSearch() { var str = document.forms[0].p.value; // 入力された検索文字 var num = document.forms[0].addlist.value; // 選択されたリストの番号 // 選択された検索サイトのフォーム生成（送信先の指定） var setform = document.createElement("form"); setform.action = site[num][1]; setform.method = "GET"; // setform.target = "_blank"; // 検索結果を新しいウインドウに表示する場合に追加 // 検索文字クエリ var query = document.createElement("input"); query.type = "hidden"; query.name = site[num][2]; query.value = str; setform.appendChild(query); // 検索文字以外のクエリ if (site[num].length > 3) { for (var i = 3; i < site[num].length; i++) { var extra = document.createElement("input"); extra.type = "hidden"; extra.name = site[num][i][0]; extra.value = site[num][i][1]; setform.appendChild(extra); } } // 生成したフォームを文末に追加してそのフォームを送信 document.body.appendChild(setform); setform.submit(); // document.forms[document.forms.length - 1].submit(); return false; } // --> </script> <br> <form action="http://search.yahoo.co.jp/bin/search" method="GET"> <input type="text" name="p" value="" size="50" maxlength=255 > <input type="submit" value="検索"> </form> </body> </html>
- ベストアンサー
- JavaScript
- 複数のラジオボタンの選択チェック
Q1とQ2の2問があり、ラジオボタンで回答を選択するようにしていますが、 ラジオボタンを選択しなかった場合、選択を促すようメッセージを表示させるようJavaScriptで以下のように作成してみましたがうまくいきません。 Q1とQ2の両方を選択しなかった場合、「Q1が選択されていません」とメッセージが表示されますが、Q1だけを選択してQ2を選択しなかった場合はメッセージが表示されません。 いろいろ調べてみたのですが、function checkの使い方に問題があるのでしょうか？ function check(){ var flag = 0; if(document.form1.Q1.length) { flag = 1; var i; for(i = 0; i < document.form1.Q1.length; i ++){ if(document.form1.Q1[i].checked){ flag = 0; break; } } } if(flag){ window.alert('Q1が選択されていません'); return false; } else{ return true; } var flag = 0; if(document.form1.Q2.length) { flag = 1; var i; for(i = 0; i < document.form1.Q2.length; i ++){ if(document.form1.Q2[i].checked){ flag = 0; break; } } } if(flag){ window.alert('Q2が選択されていません'); return false; } else{ return true; } }
- 締切済み
- JavaScript
- 検索バーについて
現在、下のソースを使い検索サイトを作成しています。今、yahooやgoogleのようにtopページでキーワードを入力して検索するところを作成できたのですが、その検索結果を結果ページで表示したいのですが、どうしても表示できません。ソースは下のとおりです。アドバイス等よろしくお願いします。説明が下手ですみません。 (topページ) <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> <!-- var site = new Array(); site[0] = ["Google", "http://www.google.com/search", "q", ["hl", "ja"], ["ie", "Shift_JIS"]]; site[1] = ["Yahoo", "http://search.yahoo.co.jp/bin/search", "p",["ei", "Shift_JIS"]]; window.onload = function() { if (!document.createElement) return; if (document.all && !window.clipboardData &&!window.opera) return; var select = document.createElement("select"); select.id = "addlist"; for (var i = 0; i < site.length; i++) { var opt = document.createElement("option"); opt.value = i; var str = document.createTextNode(site[i][0]); opt.appendChild(str); select.appendChild(opt); } var obj = document.forms[0]; obj.elements[obj.elements.length - 1].value = "検索"; obj.insertBefore(select, obj.elements[1]); obj.onsubmit = selectSearch; } function selectSearch() { var str = document.forms[0].p.value; var num = document.forms[0].addlist.value; var setform = document.createElement("form"); setform.action = site[num][1]; setform.method = "GET"; setform.target = "_blank"; var query = document.createElement("input"); query.type = "hidden"; query.name = site[num][2]; query.value = str; setform.appendChild(query); if (site[num].length > 3) { for (var i = 3; i < site[num].length; i++) { var extra = document.createElement("input"); extra.type = "hidden"; extra.name = site[num][i][0]; extra.value = site[num][i][1]; setform.appendChild(extra); } } document.body.appendChild(setform); setform.submit(); return false; } // --> </script> <form action="http://search.yahoo.co.jp/bin/search" method="GET"> <input type="text" value=""> <input type="submit" value="検索"> </form> </body> </html> (結果ページ) <html lang="ja"> : topページのソースと全て同じソースです。 : </form> <iframe src="#" width="100%" height="82%" scrolling="yes" name="main" frameborder="0">ブラウザ</iframe> </body> </html>
- ベストアンサー
- JavaScript
- DMM検索のブックマークレット出来ませんか？
google検索の javascript:(function(){x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) {Q=y.getSelection();} else if (x.getSelection) {Q=x.getSelection();};m='http://www.google.co.jp/search?hl=ja&q='+encodeURIComponent(Q)+'&lr=lang_ja';y.open(m,'_blank','');})(); みたいな DMMの月額レンタル検索をできませんか http://www.dmm.com/search/=/category=rental/searchstr=BA__/analyze=V1EAAFYHUQs_/
- 締切済み
- JavaScript
- フレームでページ内検索機能
2分割のフレームで名前はmenuとmainとします。 menu画面で文字列を入力させ、main画面内の文字列を検索する機能を作っています。 ボタンを1回押したときに最初に一致する文字列が反転するところまでは出来ます。 2回目以降に押したときに次に一致する文字列を反転させたい。 Netscapeでは出来ていますが、IEでの方法が分かりません。 ご教授お願いします。 'menuのソース <form onsubmit="return myFindText(this.key.value)"> <input type=text name=key> <input type=submit value="検索"> </form> function myFindText(text) { if(document.all){ // IE4 var target = parent.main.document.body.createTextRange(); if (target.findText(text)){ target.select(); target.scrollIntoView(); } } else if(document.layers){ //NN4 parent.main.window.find(text); } return false; }
- ベストアンサー
- JavaScript
- 文字の大きさ変更
ページ全体の文字の大きさを変更できるボタンを設置したいと思い 検索で調べて柿のようなスクリプトを作ったのですが、 ＩＥ６だと反映されません。どうしてでしょうか？ （長くてすみません） <SCRIPT language="JavaScript"> <!-- var Default=3; var tags = new Array('div','td','tr'); var sizing = new Array('70%','80%','90%','100%','110%','120%','130%'); function FontChange(target,tarF){ if (!document.getElementById) return var dore = document,tarS = null,fontSize =Default,value,su,cTags; fontSize += tarF; if (fontSize < 0) fontSize = 0; if (fontSize > 6) fontSize = 6; Default = fontSize; if (!(tarS = dore.getElementById(target))) tarS = dore.getElementsByTagName(target)[0]; tarS.style.fontSize = sizing[fontSize]; for (value = 0 ; su < tags.length ; value++){ cTags= tarS.getElementsByTagName(tags[value]); for (su = 0 ; su < cTags.length ; su++) cTags[su].style.fontSize = sizing[fontSize]; } } //--> <a href="javascript:FontChange('body',1)"><img src="images/big.jpg" alt="" border="0" /></a> <a href="javascript:FontChange('body',-1)"><img src="images/small.jpg" alt="" border="0" /></a> それから出来ればボタン大中小で押せばサイズがそのサイズ で決まっているのだいいのですが、参考になるサイトは ないでしょうか？
- ベストアンサー
- JavaScript
- クリックでお気に入りに入れるプログラム
<head> <script language="JavaScript"> <!-- var burl = window.document.location var btitle = window.document.title function bookmark() { if(document.all) window.external.AddFavorite(burl,btitle) } //--> </script> </head> <a href="#" OnClick="bookmark();return false;"> お気に入りに入れる </a> ここまでできたのですが、どのHTMLページをお気に入りにいれるかという設定はどうしたらいいのでしょうか？フレームを使用しておりますので、フレームに上のタグをいれて、ブックマークを入れるとそのフレームだけのお気に入りになってしまいます。 それと var burl = window.document.location var btitle = window.document.title の部分は一体何を意味するのでしょうか？
- ベストアンサー
- JavaScript
- 検索ファームの作り方について教えてください！
検索をフォームを作成したく、下記ソースで作成したのですが、 検索ボタンを押してもうまくページが開きません。 色々調べてみたのですが原因がわからず困っております。 どなたか分かるかたがいらっしゃいましたら教えて頂きたく思います。 また間違ってる箇所の指摘と出来れば解答も頂ければ助かります。 よろしくお願いします。 <head> <script type="javascript"> <!-- function mySearch(frm) { var select = frm.elements["site"]; var sitename = select.options[select.selectedIndex].value; var word = frm.elements["word"].value; document.forms[sitename].elements[0].value = word; document.forms[sitename].submit(); //--> </script> </head> <html> 検索フォーム<br> <form name="google" method="get" action="http://www.google.co.jp/search"> <p><input type="hidden" name="q" value=""></p> </form> <form name="yahoo" method="get" action="http://search.yahoo.co.jp/search"> <p><input type="hidden" name="p" value=""></p> </form> <form lang="ja" onsubmit="mySearch(this); return false;"> <p>検索ワード<input type="text" name="word" size="30"> </p> <p>検索サイト <select name="site"> <option value="google">google</option> <option value="yahoo">yahoo</option> </select></p> <input type="submit" value="検索"> </form> <hr> </html>
- 締切済み
- HTML
- ラジオボタンとセレクトボックスの選択チェック
ラジオボタン、セレクトボタンの選択チェックをしたいのですが 同時にチェックする場合どうすればよいのでしょうか。 失敗策ですが、参考までに↓ function check() { var flag=0; if( document.form1.seibetu.length){ flag=1; var i; for(i=0; i<document.form1.seibetu.length; i++){ if(document.form1.seibetu[i].checked){ flag=0; break; } } } else{ if(!document.form1.seibetu.checked){ flag=1; } } if(flag){ window.alert('性別が選択されていません'); return false; } else{ return true; } if(document.form1.nenrei.options[document.form1.nenrei.selectedIndex]. value==""){ flag=1; } if(flag){ window.alert('年齢が選択されていません'); return false; } else{return true; } }
- ベストアンサー
- その他([技術者向] コンピューター)
- ページ内検索の限界？
以下のjavascriptを記述してページ内のテキストを検索して移動するという処理をしているのですが、HTMLソースで5万行以降のテキストの検索ができません。 5万行以下のテキストの検索はできるのですが、5万行を超えるテキストを検索すると反応しません。 これはjavascript上の制限事項になるんでしょうか？ var fFirst; //はじめかどうかのフラグ var objRange; //TextRangeオブジェクト //検索関数 function Start() { objRange = document.body.createTextRange(); //文字列が空であれば終了 if (document.search_form.txtWord.value.length == 0) { return; } strCheck = document.search_form.txtWord.value; if (fFirst) { fFirst = false; } else { //2度目以降 objRange.move("character", 1); } //セレクトする if (objRange.findText(strCheck)) { objRange.select(); objRange.scrollIntoView(); } }
- 締切済み
- JavaScript
