jQuery 기반으로 텍스트 상자에는 숫자(소수, 정수)만 입력할 수 있습니다

jQuery 기반으로 텍스트 상자에는 숫자(소수, 정수)만 입력할 수 있습니다_jquery

WBOY

풀어 주다： 2016-05-16 15:20:04

원래의

1162명이 탐색했습니다.

실제 응용 프로그램에서 텍스트 상자는 정수만 입력할 수 있지만 때로는 더 "형제적"이고 부동 소수점 숫자의 입력을 허용할 수도 있습니다. jquery를 사용하여 을 구현하는 방법을 예제 코드를 통해 소개하겠습니다. 텍스트 상자에는 소수점 이하 자릿수만 입력할 수 있습니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
$(".NumText").keyup(function(){ 
$(this).val($(this).val().replace(/[^0-9.]/g,'')); 
}).bind("paste",function(){ 
$(this).val($(this).val().replace(/[^0-9.]/g,'')); 
})
}); 
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>

로그인 후 복사

위 코드는 우리의 요구 사항을 충족합니다. 텍스트 상자에는 정수 또는 부동 소수점 숫자만 입력할 수 있으며 코드는 비교적 간단하므로 여기서는 소개하지 않겠습니다.

다음은 jquery를 사용하여 텍스트 상자에 정수만 입력할 수 있다는 것을 인식하는 방법을 소개합니다.

때때로 텍스트 상자 내용에 정수만 입력할 수 있도록 규정해야 할 수도 있습니다. 다음은 도움이 필요한 친구를 위해 이 기능을 구현할 수 있는 코드 예제입니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
$(".NumText").keyup(function(){ 
$(this).val($(this).val().replace(/\D|^0/g,'')); 
}).bind("paste",function(){
$(this).val($(this).val().replace(/\D|^0/g,'')); 
})
}); 
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>

로그인 후 복사

위 코드는 예상 요구 사항을 충족합니다. 텍스트 상자에는 정수만 입력할 수 있습니다. 다음은 구현 프로세스에 대한 소개입니다.

코드 주석:

1.$(function(){}), 문서 구조가 완전히 로드되면 함수의 코드를 실행합니다.
2.$(".NumText").keyup(function(){}), 텍스트 상자에 대한 keyup 이벤트 처리 함수를 등록합니다.
3.$(this).val($(this).val().replace(/D|^0/g,'')), replacement() 함수를 통해 정규식을 사용하여 숫자가 아닌 내용을 빈 내용으로 바꿉니다. .
4.bind("paste",function(){$(this).val($(this).val().replace(/D|^0/g,''));}), 붙여넣기 이벤트 처리 등록 물론 여기에는 모호한 체인 호출이 사용되어 사용자가 ctrl v를 사용하여 복사하여 붙여넣는 것을 방지합니다.

위 코드는 비교적 간단하게 작성되었으며, 어려운 점을 댓글로 첨부해 두었으니 모두에게 도움이 되리라 믿습니다.