- ベストアンサー
検索機能付きHTMLにジャンプ機能を追加する方法
- 検索機能を付けたHTMLにジャンプ機能を追加する方法を教えてください。
- 「Search」クリック後に該当箇所にジャンプする機能を付けたいです。
- 具体的な手順やコードの記述を教えていただけると助かります。
- 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
