Web页面扫码枪作为输入弹出开发者工具

$现象

Web页面在使用扫码枪输入的时候会弹出开发者工具。

$原因

查看Chrome的帮助文档,打开“开发者工具”的快捷键有Ctrl + Shift + j 或 F12

看扫码枪的说明文档,可在扫码文本内容后添加回车和添加换行。在notepad++编辑器中使用扫码枪输入发现其所谓的添加回车其实是添加回车换行(\r\n), 而其添加换行则真正的添加换行符(\n)

使用notepad++按住Ctrl + Shift + j 发现其输入的就是换行符(\n)

由以上判断,扫码枪作为输入添加换行,弹出开发者工具。是因为换行(\n)的输入方式(Ctrl + Shift + j)恰恰是Chrome、Firefox、Edge打开开发者工具的快捷键。

$解决办法

HTML页面监听按键事件,阻止(Ctrl + Shift + j)默认行为发生。

测试页面:

<!DOCTYPE html>
<html>
<body>

<h2>按键测试</h2>
<input placeholder="Click here, then press down a key." size="40"></input>
<script>


const input = document.querySelector('input');

input.addEventListener('keydown', keydown);
function keydown(e) {
	console.log(e);
	if(e.ctrlKey == true && e.shiftKey == true && e.which == 74)
		e.preventDefault();
}
</script>

</body>
</html>

“J”的ASCII为74

把光标点到输入框,按Ctrl + Shift + j就不会弹出开发者工具了。

$参考

https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

https://stackoverflow.com/questions/23492793/jquery-disable-browser-shortcut-keys

此条目发表在杂项分类目录,贴了, , , , , 标签。将固定链接加入收藏夹。

发表评论

您的电子邮箱地址不会被公开。