>웹 프론트엔드 >JS 튜토리얼 >'JavaScript'는 입력 숫자만 입력하도록 제한합니다. 구현 아이디어 및codes_javascript 기술.

'JavaScript'는 입력 숫자만 입력하도록 제한합니다. 구현 아이디어 및codes_javascript 기술.

WBOY
WBOY원래의
2016-05-16 17:35:521005검색

이거에 대해 많은 분들이 써주셨는데 오늘 임시로 쓰려고 하다가 요건에 맞는게 없어서 바로 써봤습니다. 이제 다 쓰고 요건에 맞아서 올려봅니다. 모두가 시도해 볼 수 있도록.

요구 사항은 매우 간단합니다. 텍스트 상자는 숫자(또는 소수점)로 제한되어야 하며 IE 및 Firefox를 지원해야 합니다.
HTML 입력은 이렇습니다

코드 복사 코드는 다음과 같습니다.

< ; input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber($(this),value)" />

•IE 브라우저에 있는 스타일 활성화하면 사용자는 이 텍스트 상자의 입력 방법을 사용할 수 없습니다.
•Onkeyup은 직접 작성한 js입니다. 전체 코드는 다음과 같습니다.
---------------------------------- --- ---------------------
인증은 숫자만 입력 가능합니다
코드 복사 코드는 다음과 같습니다.

function ValidateNumber(e, pnumber){
if (!/^d $/.test (pnumber)){
$(e).val(/^d /.exec($(e).val()))
}
return false;
}

데모에서는 Regex를 사용하여 숫자가 아닌 항목을 필터링합니다.
---------------------------------- --- ----------------------------------
실제로 자주 확인해야 할 사항은 길에서 발견한 이상한 값들이 잔뜩 "1.2.3456"으로 입력이 되더군요. 사실 Regex를 조금만 바꿔도 확인이 가능합니다.
코드 복사 코드는 다음과 같습니다.

function ValidateFloat(e, pnumber){
if (!/^d [.]?d*$/.test(pnumber)){
$(e).val(/^d [.]?d*/.exec($(e) .val( )));
}
return false;
}

이런 식으로 정수나 소수점을 입력할 수 있습니다
--- ----- ------------------- ----- -------------
위 내용은 도움이 필요한 친구들을 위한 내용입니다.
일부 네티즌들은 이런 건 jQuery를 사용할 필요가 없다고 말하기 때문에 굳이 사용할 필요는 없으니 순수 자바스크립트 버전으로 작성해보자
HTML을 바꿔야 한다
코드 복사 코드는 다음과 같습니다.



숫자만 입력할 수 있습니다(순수 자바스크립트)
복사 code 코드는 다음과 같습니다.

function ValidateNumber(e, pnumber){
if (!/^d $/.test(pnumber)) {
e.value = /^d /.exec(e.value);}
return false
}

소수점 입력 가능(순수 자바스크립트)
코드 복사 코드는 다음과 같습니다.

function ValidateNumber(e, pnumber)
{
if (!/^d [.]?d*$/ .test(pnumber))
{
e.value = /^d [.]?d*/.exec(e.value );
}
return false;
}

몇몇 네티즌들은 소수점 이하 한자리로만 제한하고 싶다고 하더군요. 유일하게 중요한 것은 RegExp
코드를 복사하는 것입니다 코드는 다음과 같습니다.

function ValidateFloat2(e, pnumber)
{
if (!/^d [.]?[1- 9]?$/.test(pnumber))
{
e.value = / d [.]?[1-9]?/.exec(e.value);
}
return false
}

사악한 ​​IE를 사용하는 경우 , 처음에 숫자가 아닌 값을 입력하면 성가신 null이 발생하므로 다음과 같이 필터링하도록 다시 작성해야 합니다.
코드 복사 코드는 다음과 같습니다.

if (!/^d $/.test(pnumber ))
{
var newValue = /^d /. exec(e.value);
if (newValue != null)
{
e.value =
}
else
{
e.value = " ";
}
}
false 반환;
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.