写的匆忙，示意一下，有待完善。把以下代码复制到文本文件中，把文件扩展名改为.html就可以运行了。

<html>

<head>

    <style type="text/css">

        .res

        {

            color: Red;

        }

    </style>

    <script src="jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var oldKey = "";

        var index = -1;

        var pos = new Array();

        var oldCount = 0;

        function search(flg) {

            if (!flg) {

                index++;

                index = index == oldCount ? 0 : index;

            }

            else {

                index--;

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

            }

            $(".result").removeClass("res");

            $("#toresult").remove();

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

            if (!key) {

                oldKey = "";

                return; //key为空则退出

            }

            if (oldKey != key) {

                //重置

                index = 0;

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

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

                });

                pos = new Array();

                $("body").html($("body").html().replace(new RegExp(key, "gm"), "<span id='result" + index + "' class='result'>" + key + "</span>")); // 替换

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

                oldKey = key;

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

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

                });

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

            }

            $(".result:eq(" + index + ")").addClass("res");

            $("body").scrollTop(pos[index]);

        }

    </script>

</head>

<body>

    <div style="position: fixed; right: 20px; top: 0;">

        <input id="key" type="text" style="width: 100px;" />

        <input type="button" value="下一个" onclick="search()" />

        <input type="button" value="上一个" onclick="search(1)" />

    </div>

    <div style="height: 50px;">

    </div>

    <div style="height: 200px;">

        1待搜索的文本。

    </div>

    <div style="height: 200px;">

        2待搜索的文本。

    </div>

    <div style="height: 200px;">

        3待搜索的文本。

    </div>

    <div style="height: 200px;">

        4待搜索的文本。

    </div>

    <div style="height: 200px;">

        5待搜索的文本。

    </div>

    <div style="height: 200px;">

        10美丽的家乡。

    </div>

    <div style="height: 200px;">

        11美丽的家乡。

    </div>

    <div style="height: 200px;">

        12美丽的家乡。

    </div>

    <div style="height: 200px;">

        13美丽的家乡。

    </div>

    <div style="height: 200px;">

        14美丽的家乡。

    </div>

    <div style="height: 200px;">

        15美丽的家乡。

    </div>

</body>

</html>

模拟浏览器搜索功能(Ctrl + F)的更多相关文章

  1. 前端页面模拟浏览器搜索功能Ctrl+F实现

    <html> <head> <style type="text/css"> .res { color: Red; } .result{ back ...

  2. 利用api模拟百度搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. UltraEdit （Ctrl + F） 查找、（Ctrl + R）替换功能失效

    环境: Windows 7 Service Pack 1 X64 工具: UltraEdit Version 21 症状: UltraEdit (Ctrl + F) 查找.(Ctrl + R)替换功能 ...

  4. idea 模糊搜索 ctrl + f（单词不完整搜索不到的解决办法）

    1,现象描述,笔者在用 idea 的 ctrl + f 搜索文件的内容时,发现了很神奇的问题,就是字符串必须输入完整才能搜索到,输入一半,哪怕是个字母输入了9个也搜不到 2,可以发现,就差一个字母 h ...

  5. 原生javascript实现 下拉框搜索功能

    由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...

  6. python--selenium简单模拟百度搜索点击器

    python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...

  7. idea 光标变成粗体且当前文件搜索功能无法使用的问题

    今天安装了idea最新版,安装完成后发现光标变成了粗体,并且快捷键在使用时出现了问题,比如:ctrl+F搜索功能无法使用 经过反复修改配置也无法改善情况,后来一次重启看到下面小窗弹出有关vim的一个提 ...

  8. Python使用mechanize模拟浏览器

    Python使用mechanize模拟浏览器 之前我使用自带的urllib2模拟浏览器去进行訪问网页等操作,非常多站点都会出错误,还会返回乱码.之后使用了 mechanize模拟浏览器,这些情况都没出 ...

  9. java模拟浏览器包selenium整合了htmlunit，火狐浏览器，IE浏览器，opare浏览器驱

    //如果网页源码中有些内容是js渲染过来的,那你通过HttpClient直接取肯定取不到,但是这些数据一般都是通过异步请求传过来的(一般都是通过ajax的get或者post方式).那么你可以通过火狐浏 ...

随机推荐

  1. Delphi Android程序启动过程

    Delphi的Android程序是原生的程序,也就是NativeActivity.那么就需要先看一下NativeActivity的原理, 在AndroidManifest.xml文件里面指定入口act ...

  2. TargetProcess公司敏捷开发历程－开发实践篇

  3. ecshop登陆后价格可见,会员注册登陆才能显示价格

    打开模版文件夹里面的goods.dwt 查找{$lang.shop_price}<font class="price" id="ECS_SHOPPRICE" ...

  4. 解决“com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536”问题(l转)

    同时在工程中引入了多个第三方jar包,导致调用的方法数超过了android设定的65536个(DEX 64K problem),进而导致dex无法生成,也就无法生成APK文件. 解决办法如下: 1.谷 ...

  5. eclipse 启动后，闪退

    网上的大部分是说删除 .metadata    说会workspace里面项目会消失 下面这个可以启动,项目还在 最好解决办法: 删除文件 [workspace]/.metadata/.plugins ...

  6. GitHub上排名前100的Android开源库介绍（来自github）

    本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍,至于排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果,然后过滤了 ...

  7. PowerShell定时抓取屏幕图像

         昨天的博文写了定时记录操作系统行为,其实说白了就是抓取了击键的记录和对应窗口的标题栏,而很多应用程序标题栏又包含当时记录的文件路径和文件名,用这种方式可以大致记录操作了哪些程序,打开了哪些文 ...

  8. Windows下Git安装指南

    参考<Git权威指南>安装整理,图书配套网址参见[1] 1. Cygwin下安装配置Git 1. 在Windows下安装配置Git有2种不同的方案 (1)msysGit, (2)Cygwi ...

  9. linux ulimit调优

    1,说明:ulimit用于shell启动进程所占用的资源.2,类别:shell内建命令3,语法格式:ulimit [-acdfHlmnpsStvw] [size]4,参数介绍:-H 设置硬件资源限制. ...

  10. coreData 深入理解4 --总结 (线程安全与同步--iOS5 前后对比)

    Core Data是iOS中很重要的一个部分,可以理解为基于SQLite(当然也可以是其他的Storage,如In-memory,只是SQLite比较常见)的一个ORM实现,所以有关系数据库的特性,又 ...