プロが教えるわが家の防犯対策術！

検索機能を付けたｈｔｍｌにジャンプ機能を付けたい

解決済

  • 質問者：blue-rapis
  • 質問日時：
  • 回答数：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" 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」クリック後、該当箇所にジャンプする機能を付けたいです。
教えていただければ幸いです。
宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： nicorus
  • 回答日時：

良かったら参考にしてください。


<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>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： my--
  • 回答日時：

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 …
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報