代码收藏 JS实现页内查找定位功能

前部分为IE下搜索方法 用TextRange来实现

后部分为firefox、chrome下搜索方法

 1         var nextIndex = 0;
 2         var searchValue = ‘‘;
 3         var input1=document.getElementById(‘input1‘);
 4
 5         function findInPage(searchText) {
 6             if (!searchText){
 7                 alert(‘搜索字符串为空‘);
 8             }
 9
10             if(searchText && searchText != searchValue && nextIndex > 0){
11                 searchValue = searchText;
12                 nextIndex = 0;
13             }else{
14                 searchValue = searchText;
15             }
16
17             if (document.all) {
18                 txt = document.body.createTextRange();
19                 var found =false;
20                 for (var i = 0; i <= nextIndex && (found = txt.findText(searchValue))==true; i++) {
21                     txt.moveStart("character", 1);
22                     txt.moveEnd("textedit");
23                 }
24
25                 if (found) {
26                     txt.moveStart("character",-1);
27                     txt.findText(searchValue);
28                     txt.select();
29                     txt.scrollIntoView();
30                     nextIndex++;
31                 }else{
32                     if (nextIndex > 0) {
33                         nextIndex = 0;
34                         findInPage(searchValue);
35                     }
36                 }
37             }else{
38                 window.find(searchValue,false,true);
39             }
40         }    
时间: 2024-12-28 11:09:23

代码收藏 JS实现页内查找定位功能的相关文章

CSS+JS实现的div层定位功能和自动消失

CSS顶部固定功能,有空的时候研究了一下CSS的定位功能,做了这个大家熟悉的顶部固定功能,鼠标移上去顶部会消失,并可判断浏览器是否支持audio元素!顶部元素在时间控制下也可自动消失. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

精品JS代码收藏大全

1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键    <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3. onpaste="return false&quo

实现页内跳转定位到某个ID

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js调试系列: 源码定位与调试[基础篇]

js调试系列目录: - 如果看了1, 2两篇,你对控制台应该有一个初步了解了,今天我们来个简单的调试.昨天留的三个课后练习,差不多就是今天要讲的内容.我们先来处理第一个问题:1. 查看文章下方 推荐 这个功能所调用的函数源码其实非常简单,点放大镜选中那个推荐即可.这个  votePost(cb_entryId,'Digg')  就是推荐按钮所调用的函数了,是不是非常简单. 第二个问题,定位到函数所在文件位置.其实也是非常简单的,当然,不熟悉控制台的朋友也许不知道怎么看.我在控制台输入 voteP

Windows Store App JavaScript 开发:页内导航

页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用PageControlNavigator控件加载其他页面的内容.WinJS.Navigation.navigate函数以一个包含页面地址的对象为参数,在该函数执行时将触发WinJS.Navigation.onnavigated事件并把页面地址传递给该事件.PageControlNavigator控件

【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的wifi或者基站位置数据库,得到的定位地点.定位数据库可以不断完善不断补充,所以,越定位越准确.本文详细描述了,如果使用高德JS API来实现位置定位.城市定位的方法,包含了IP定位,浏览器定位,检索定位等多种网络定位方法.当然,如果您的手机有GPS功能,那么使用浏览器定位的时候,会自动获取GPS信息,使

Win10系列:JavaScript页内导航

页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用PageControlNavigator控件加载其他页面的内容.WinJS.Navigation.navigate函数以一个包含页面地址的对象为参数,在该函数执行时将触发WinJS.Navigation.onnavigated事件并把页面地址传递给该事件.PageControlNavigator控件

TinyMCE主题的文章目录没法点击页内跳转

我想改一下reacg这个粉嫩博客的配置:TinyMCE主题的文章目录没法点击页内跳转. 小菜鸟,思路:去学习BNDong大神 怀疑是这两个和文章目录有关 Cnblogs-Theme-SimpleMemory/src/script/marvin.nav2.js / $(document).ready(function () { var b = $('body'), c = 'cnblogs_post_body', d = 'sideToolbar', e = 'sideCatalog', f =

Bootstrap历练实例:标签页内的下拉菜单

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:标签页内的下拉菜单</title> <meta charset="utf-8" /> <meta name="vie