JS限制用户只能输入数字

最新推荐文章于 2024-05-09 15:05:20 发布

zhoulenihao

最新推荐文章于 2024-05-09 15:05:20 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： js限制 onkeydown

本文链接：https://blog.csdn.net/zhoulenihao/article/details/46873455

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近有个小需求，要求用js实现只能让用户输入0-9的数字，考虑到输入，可能有集中情况：

1、用户从键盘输入；

2、用户用鼠标右键的黏贴功能；

3、用户使用ctrl+v；

所以，需要控制用户的键盘输入、禁用黏贴功能，代码实现如下：

<html>
<head>
	<title>Input Limit Demo</title>
	<script type="text/javascript" src="jquery.1.4.2-min.js"></script>
	<script type="text/javascript">
		//方式一：原生态js实现"只允许用户输入数字"
		function limitInput(ele){
			 var numberLimit = function(e) {
				e = e || window.event;
				var k = (typeof e.which == "number") ? e.which : e.keyCode;
				if((k<48 || k>57) && k!=8){
					return false;
				}
				if(e.shiftKey && k >= 48 && k <= 57) {
					return false;
				}
				return true;
			};
			ele["onkeydown"] = numberLimit;
		}

		window.onload = function(){
			var ele = document.getElementById("lmInput1");
			limitInput(ele);
		}

		//方式二：jQuery方式实现"只允许用户输入数字"
		$(document).ready(function(){
			$("#lmInput2").keydown(function(e){
				var k = (typeof e.which == "number") ? e.which : e.keyCode;
				if((k<48 || k>57) && k!=8){
					return false;
				}
				if(e.shiftKey && k >= 48 && k <= 57) {
					return false;
				}
				return true;
			});
		});
	</script>
</head>
<body>
	<div>原生态实现方式：<input type="text" id="lmInput1" value="" οnpaste="return false" /></div>
	<div>jQuery实现方式：<input type="text" id="lmInput2" value="" οnpaste="return false" /></div>
</body>
</html>

zhoulenihao

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS限制用户只能输入数字

最近有个小需求，要求用js实现只能让用户输入0-9的数字，考虑到输入，可能有集中情况：1、用户从键盘输入；2、用户用鼠标右键的黏贴功能；3、用户使用ctrl+v；所以，需要控制用户的键盘输入、禁用黏贴功能，代码实现如下： Input Limit Demo //方式一：原生态js实现"只允许用户输入数字" function limitInput(ele
复制链接

扫一扫

专栏目录