2021年6月7日

禁用qq浏览器数字文本框 鼠标滚轮滑动 数字加减


切图的时候遇到的这么一个问题,qq浏览器数字文本框 鼠标滚轮滑动,数字会自动加减,这个虽然也有一定的作用,但是并不是所有人都喜欢,所以必要的时候还是要禁用掉,目前在chrome,360为发现该问题,qq浏览器存在,禁用的方法也很简单。

核心代码就这一句话

<input type=”number” id=”inp1″ onmousewheel=”return false;”>

 

以下是扩展资料
<style type=”text/css”>
/*盒子大小从边框开始计算*/
html * {
box-sizing: border-box;
}
/*解决模态框抖动*/
html {
overflow-y: scroll;
-ms-overflow-style: none;
}
/* 隐藏滚动条 */
html::-webkit-scrollbar {
display: none;
}
body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
}
/* 去除webkit中input的type=”number”时出现的上下图标 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=”number”] {
-moz-appearance: textfield;
}
</style>
<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”UTF-8″>
<title>禁止input输入框的鼠标滚轮事件</title>
<script src=”jquery.js”></script>
</head>
<body>
<!– 禁止谷歌浏览器、Opera浏览器以及360浏览器等采用谷歌内核的浏览器 –>
<input type=”number” id=”inp1″ onmousewheel=”return false;”>
<!– 禁止Firefox浏览器 –>
<input type=”number” id=”inp2″>
<script>
$(“#inp2”)[0].addEventListener(‘DOMMouseScroll’, MouseWheel, false);
function MouseWheel(event) {
event = event || window.event;
event.preventDefault();
}
</script>
</body>

</html>

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签: