js에서 입력 자릿수를 제한하려면 어떤 방법을 사용해야 합니까?

숫자 유형의 입력 상자를 사용할 때 입력 자릿수를 제한해야 할 수도 있습니다. 이때 일반적으로 maxlength를 생각하지만 숫자 유형인 경우에는 maxlength가 지원되지 않습니다. 이 문제 방법.

1) max와 min

max와 min은 숫자 입력창에서 지원되기 때문에 11자리 휴대폰 번호 입력을 제한하고 싶다면 다음 코드를 사용하면 됩니다

<input type="number" max="99999999999" />

이것은 지원되지 않습니다 사용자 입력을 제한하지만 제출할 때 사용자에게 메시지를 표시합니다.

[예시]

2) oninput 이벤트

초과된 숫자를 잘라서 삭제합니다

1 myInput.oninput = function () {2     if (this.value.length > 4) {3         this.value = this.value.slice(0,4); 
4     }5 }

하지만 이는 여전히 maxlength의 논리, 즉 이전 입력으로 커서를 이동할 때의 논리와 약간 다릅니다. 번호를 다시 입력하면 마지막 번호가 삭제된다는 것을 알 수 있습니다.

[예]

3) keydown

keydown 이벤트는 숫자를 누른 후 현재 입력 값의 자릿수를 확인하는 데 도움이 될 수 있습니다. 자릿수를 초과하면 false를 반환하므로 어디에서나 가능합니다. 커서는 새로운 숫자가 입력되지 않습니다.

<input type="number" onKeyDown="if(this.value.length==2) return false;" />

하지만 이로 인해 2개의 숫자가 충족되면 삭제 키(또는 모든 키)가 유효하지 않게 됩니다. ╮(╯﹏╰)╭정말 창피해요

[예]

4) keypress, keydown 및 oninput을 사용하는 경우

 1 <input name="myInput_DRS" onkeypress="return isNumeric(event)" 
 onkeydown="return isMoreThan(event)" oninput="maxLengthCheck(this)" 
 type="number" placeholder="Type..." min="1" max="999" /> 2  3 <script> 4   
 function maxLengthCheck(object) { 5     
 if (object.value.length > object.max.length) 6       
 object.value = object.value.slice(0, object.max.length) 7   }   
 function isNumeric(evt) {10     var theEvent = evt || window.event;11     
 var key = theEvent.keyCode || theEvent.which;12     key = String.fromCharCode(key);13    
 var regex = /[0-9]|\./;14     if (!regex.test(key)) {15       theEvent.returnValue = false;16       
 if (theEvent.preventDefault) theEvent.preventDefault();17     }18   }19 20   function isMoreThan(evt) {21     
 var theEvent = evt || window.event;22     var target = theEvent.target;23     var keyID = event.keyCode;24     
 var isDelete = false;25     switch (keyID) {26       case 8:27           isDelete = true;28         
 // alert("backspace");29         break;30       case 46:31           isDelete = true;32         
 // alert("delete");33         break;34       default:35         break;36     }37 38     
 if (!isDelete && target.value.length == target.max.length) {39       return false;40     
 } 
 } 
 </script>

[예]

5) 입력 부분

<input type="text" pattern="\d*" maxlength="2">

좋아 , Internet Explorer 10, Firefox, Opera 및 Chrome은 패턴 속성을 지원합니다.

참고: Safari 또는 Internet Explorer 9 및 이전 버전은 태그의 패턴 속성을 지원하지 않습니다.

6) input[type=tel]

모바일 기기에서 input[type=tel]은 최대 길이를 지원하며 숫자 키보드를 통해서만 입력할 수 있습니다.

위 내용은 js에서 입력 자릿수를 제한하려면 어떤 방법을 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!