代码拉取完成,页面将自动刷新
在搜索框中,模拟 Ctrl + F 的搜索功能,支持自选可搜索区域范围, 且支持回车查看下一个,上下查看,自动滚动定位, 帮助小白解决不会快捷键操作的搜索。
首先查看浏览器自带的 api 啥的,抱歉,没有,找不到~
将原网站下载下来的脚本命名为 find5.js 直接引入,即可得到下面的搜索框效果
<script type="text/javascript" language="JavaScript" src="find5.js"></script>
基于一个网站,具体参考网址是: 链接: https://www.seabreezecomputers.com/tips/find5.htm 进行了二次封装。 非常感谢此网站的作者,让我看到了曙光,因为网上其他搜索组件各种奇形怪状的 bug 让我倍感难受。
因为纯原生,所以支持各种框架(vue/react)等。 不用细看下面整个脚本,直接复制粘贴创建一个新的 new_find5.js 即可。先看下效果 : 且支持自适应换行
这里的第一个参数是代表是否展示 label: '查看', 第二个参数 是指定的区域进行搜索。默认是 body 整个网页 initFindWin(false, "contentMain");
<div id="findwindow"></div>
<div id="contentMain">此处是你要搜索的内容</div>
import initFindWin from "find5";
export default {
setup() {
onMounted(() => {
// 这里的第一个参数是代表是否展示label: '查看', 第二个参数 是指定的区域进行搜索。默认是body 整个网页
initFindWin(false, "contentMain");
});
return {};
},
};
import initFindWin from "find5";
useEffect(() => {
initFindWin(false, "contentMain");
}, []);
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。