html页面调用ctrl f,JSP页面 CTRL+F 功能实现

--- js 部分

var oldKey = "";

var index = -1;

var pos = new Array();//用于记录每个关键词的位置，以方便跳转

var posy = new Array();//用于记录每个关键词的位置，以方便跳转

var oldCount = 0;//记录搜索到的所有关键词总数

function previous(){

index--;

index = index < 0 ? oldCount - 1 : index;

search();

}

function next(){

index++;

//index = index == oldCount ? 0 : index;

if(index==oldCount){

index = 0 ;

}

search();

}

function search() {

$(".result").removeClass("res");//去除原本的res样式

var key = $("#key").val(); //取key值

if (!key) {

$(".result").each(function () {//恢复原始数据

$(this).replaceWith($(this).html());

});

oldKey = "";

return; //key为空则退出

}

if (oldKey != key) {

//重置

index = 0;

$(".result").each(function () {

$(this).replaceWith($(this).html());

});

pos = new Array();

posy = new Array();

var regExp = new RegExp(key+‘(?!([^)‘, ‘ig‘);//正则表达式匹配

$("body").html($("body").html().replace(regExp, "" + key + "")); // 高亮操作

$("#key").val(key);

oldKey = key;

$(".result").each(function () {

pos.push($(this).offset().top);

posy.push($(this).offset().left);

});

oldCount = $(".result").length;

}

$(".result:eq(" + index + ")").addClass("res");//当前位置关键词改为红色字体

$("body").scrollTop(pos[index]);//跳转到指定位置

window.scrollTo(0,pos[index]-500);

}

---css 部分

.res {

color: Red;

}

.result {

background: yellow;

}

--- JSP 部分

placeholder="查找姓名、网点"

style="width: 100px; text-align: right; font-size: 14px;" />

type="button" value="下一个" οnclick="next()"

style="font-size: 14px;" />

οnclick="previous()" style="font-size: 14px;" />