JavaScript는 텍스트 상자에 숫자만 입력할 수 있도록 제한합니다(현재 방법과 비교)_javascript 기술
- WBOY원래의
- 2016-05-16 17:43:211021검색
텍스트 상자의 숫자 입력을 제한해야 하는 경우가 많습니다. 여러 가지 방법을 시도했지만 어느 것도 이상적인 방법이 아니어서 재미삼아 직접 구현해 보기로 했습니다.
사용된 메소드
onkeydown 이벤트를 통해 허용된 숫자만 제어:
코드 복사 코드는 다음과 같습니다.
jQuery 플러그인을 통해 마스크 입력: http://digitalbush.com/projects/masked-input-plugin/
jQuery 플러그인을 통해 MeioMask: https://github. com/fabiomcosta /jquery-meiomask
onkeydown 이벤트를 제어하는 것은 상대적으로 번거롭습니다. 위의 단순화된 버전에는 많은 키가 포함되지 않으며 작동 경험도 좋지 않습니다.
두 개의 jQuery 플러그인은 비교적 유연하게 사용할 수 있고 대부분의 요구 사항을 충족할 수 있지만 입력 길이를 제어하는 데는 매우 융통성이 없습니다. (아마도 유연한 사용 방법을 찾지 못했을 수도 있겠죠?)
특정 구현 방법
maskedInput의 일부 방법을 사용하여 커서 위치 추출
Stackoverflow에서 제공되는 일반적인 방법을 사용하여 키보드 탭 처리: http://stackoverflow.com/questions/469357 / html-text-input-allow-only-numeric-input
업데이트: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
에 나열된 키코드를 참조하세요. 그런 다음 두 가지 속성을 사용자 정의하여 입력 숫자와 소수의 길이를 설정합니다.
•data-numbers는 숫자 입력의 길이를 제어합니다
•data-decimals는 소수 입력의 길이를 제어합니다
마지막으로 전체 코드가 구현됩니다.
코드 복사 코드는 다음과 같습니다.
function verifyDigitsOnly(evt) {
var e = evt || window.event,
key = e.keyCode || e.which;
if(
// 백스페이스, Tab, Enter, Esc, 삭제
키 == 8 || 키 == 13 || 키 == 46 || Ctrl A
(키 == 65 = true) || Home, End, 4개 방향 키
key >= 35 && key <= 40) {
return;
}
if (e.shiftKey || e.altKey || e.ctrlKey) {
return false
}
var el = e.target || e.srcElement,
// 최대 숫자 길이
nl = el.getAttribute(" data-numbers") || 15,
// 최대 소수점 길이
dl = el.getAttribute("data-decimals") || 2,
val = el.value,
// "." 위치
dotIndex = val.indexOf("."),
rng = caret.call(el),
// 커서가 "." 왼쪽에 있습니다.
rLeft = rng.end < ;= dotIndex,
// 커서가 "." 오른쪽에 있습니다.
rRight = rng.begin > if dotIndex; 숫자
key >= 48 && key < = 57 ||
// 숫자 키보드에 입력된 숫자
key >= 96 && key <= 105) {
if (validateValue (dotIndex, val, rLeft, rRight, nl, dl))
return;
// 텍스트의 일부를 선택하여 다시 처리합니다.
val = val.substring(0, rng.begin) val. substring(rng.end);
dotIndex = val.indexOf( ".");
if (validateValue(dotIndex, val, rLeft, rRight, nl, dl))
return;
else if (
// ".", " ,"
(key == 190 /*|| key == 188*/ ||
// ".", ","
key == 110/*|| 숫자 키보드의 키 == 109*/) &&
// 소수점 입력 허용
dl > 0) {
if (
// "."는 입력되지 않았고, 입력 위치 이후의 소수 자릿수가 상한에 도달하지 않았습니다.
dotIndex == -1 && (rng.end == val.length || val.substring(rng. end).length <= dl) ||
// "."가 손실되었으며, 선택한 텍스트에 "."가 포함되어 있습니다.
dotIndex > = dotIndex && dotIndex < .end)
return;
}
return false;
}
// 입력된 값의 유효성을 검사합니다.
function verifyValue(dotIndex, val, rLeft, rRight, nl, dl)
if (
// "."가 입력되지 않았습니다
dotIndex = = -1 && val.length < nl ||
// 커서 위치가 "." 앞에 있습니다.
rLeft && val.substring(0, dotIndex).length < nl
// "." 뒤의 커서가 소수점 상한에 도달하지 않음
rRight && val.substring(dotIndex 1).length < ; dl)
true 반환
false 반환
}
// 커서 위치 가져오기
function caret() {
var start, end
setSelectionRange) {
begin = this.selectionStart;
end = this.selectionEnd
} else if (document.selection && document.selection.createRange) {
var range = document.selection.createRange; ();
begin = 0 - range.duplicate().moveStart('character', -100000) ;
end = start range.text.length;
}
return { 시작: , end: end }
}
사용법
구체적인 사용법은 다음과 같습니다.
코드 복사