OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

検索機能を付けたhtmlにジャンプ機能を付けたい

  • すぐに回答を!
  • 質問No.6946176
  • 閲覧数818
  • ありがとう数1
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 42% (8/19)

いま、下のような状態で作成しています。

<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」クリック後、該当箇所にジャンプする機能を付けたいです。
教えていただければ幸いです。
宜しくお願いします。
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.2
レベル7

ベストアンサー率 70% (12/17)

良かったら参考にしてください。
<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>
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.1
レベル10

ベストアンサー率 89% (91/102)

boundingTopが使えそう。 function searchWordHighlighting() {  var boundingTop = 0;  ...  while (range.findText(searchStr)){   if (boundingTop === 0) boundingTop = range.boundingTop; // 最初に見付かった位置   ...  }  win ...続きを読む
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のテーマ
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ