Online notes favinavi - online bookmark

javascript捕获缺省的组合快捷键，比如CTRL+F

by: fanshome 2023-06-09 06:22(UTC)

Demo

有时候我们需要在网页上捕获用户的按键动作，然后避免执行缺省动作，替换成我们想要执行的程序。

下面我们以拦截并接管“ctrl+f”组合键为例，代码如下：

CSSCopy codes

body{background:#fcc;}
h1,h2{text-align:center;}

htmlCopy codes

<h1>鼠标先移动到红区点一下<br/>然后试试按下CTRL+F组合键</h1>
<br/><br/>
<h2>代码实际使用时无须先点击鼠标，此处只为实现演示需要。</h2>

javascriptCopy codes

document.addEventListener("keydown",(e)=>{
	const keyName = e.key;
	if (e.ctrlKey && (keyName=='f' || keyName=='F')) {
		e.preventDefault();
		alert('CTRL+F pressed.')
	}
}, false);

783

favinavi - for heavy web user Online notes

网页图片CSS进阶篇——优化图片，提升网页加载速度
说到提升网页中图片加载速度，一般立即想到的是给图片瘦身，比如减小图片尺寸，或者通过工具降低图片文件大小，比如png图片，可以利用在线压缩PNG图片网页工具，一般...
CSS3 一款漂亮的带渐变背景和关闭按钮的卡片头样式
使用css: linear-gradient来实现线性颜色渐变背景，效果见下图： [img] 点击“演示”按钮可以查看效果。
What should the best web favorites look like?
What should the best web favorites look like? Let's clarify the premise of ...
一个使用CSS/HTML将图像自适应屏幕的示例
在这个示例中，我们将图像的最大宽度设置为100%，并将高度设置为自动。此外，我们还添加了一个样式，以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能...
MDUI前端框架，表格头position: sticky无效的问题
MDUI前端框架不错，很漂亮、灵活，用起来能省不少时间。但是有些时候，它也会引入一些意想不到的问题：比如我想做一个统计表格，统计一大堆数据，然后希望页面滚动...
网站开发测试环境启用https，使用自签发ssl证书不是个好主意
如题，即使你折腾了一圈把自签发证书安装好了，最后一步还是会遇到浏览器不认证书的问题（比如最新版的chrome），即便你已经添加了“信任此根证书颁发机构”。带着“...