jQuery를 사용하여 HTML 입력 상자에서 숫자 (0-9) 만 허용하는 방법은 무엇입니까?
(0,1,2,3,4,5 ... 9) 0-9와 같은 숫자 만 허용하려는 입력 텍스트 필드가있는 웹 페이지를 만들 수 있습니다.
jQuery를 사용하여 어떻게 할 수 있습니까?
참고 : 이것은 업데이트 된 답변입니다. 아래 주석은 키 코드를 엉망으로 만든 이전 버전을 나타냅니다.
jQuery
inputFilter아래에 당신이 사용할 수 있는 텍스트에 입력 필터의 종류의 <input>다양한 숫자 필터 (아래 참조)를 포함합니다.
모든 키보드 단축키, 모든 상황에 맞는 메뉴 작업, 입력 할 수없는 모든 키 (예 : 커서 및 탐색 키), 캐럿 위치, 모든 언어 및 플랫폼의 모든 다른 솔루션과 달리 복사 + 대부분 넣기, 드래그 + 드롭, 모든 키보드 단축키, 모든 상황에 맞는 메뉴 레이아웃을 키보드 올바르게 지원 합니다. , 그리고 IE 9 이후의 모든 브라우저 .
JSFiddle에서 직접 시도해 사용 .
// Restricts input for each element in the set of matched elements to the given inputFilter.
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
}
});
};
}(jQuery));
$(document).ready(function() {
// Restrict input to digits by using a regular expression filter.
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value);
});
});
사용할 수있는 몇 가지 입력 필터 :
- 정수 값 (양수 만 해당) :
/^\d*$/.test(value) - 정수 값 (양수 및 특정 한계까지) :
/^\d*$/.test(value) && (value === "" || parseInt(value) <= 500) - 정수 값 (양수 및 음수 모두) :
/^-?\d*$/.test(value) - 부동 소수점 값 (
.및,소수점 구분 기호 모두 허용 ) :
/^-?\d*[.,]?\d*$/.test(value) - 통화 값 (즉, 소수점 이하 두 자리 이하) :
/^-?\d*[.,]?\d{0,2}$/.test(value) - AZ 만 해당 (예 : 기본 라틴 문자) :
/^[a-z]*$/i.test(value) - 라틴 문자 만 (예 : 영어 및 대부분의 유럽 언어, 유니 코드 문자 범위에 대한 자세한 내용 은 https://unicode-table.com 참조 ) :
/^[a-z\u00c0-\u024f]*$/i.test(value) - 16 진수 값 :
/^[0-9a-f]*$/i.test(value)
여전히 서버 측 유효성 검사를 수행 해야합니다 !
순수 JavaScript (jQuery 제외)
jQuery는 실제로 필요하지 않습니다. 순수 JavaScript로도 동일한 작업을 수행 할 수 있습니다. 참조 이 대답을 하거나 스스로를 시도 JSFiddle에 .
HTML 5
HTML 5에는 <input type="number">( 사양 참조) 기본 솔루션이 있지만 브라우저 지원은 다양합니다.
- 대부분의 브라우저는 양식을 사용할 때 입력을 확인합니다.
- 대부분의 모바일 브라우저 는
step,min및max속성을 지원하지 않습니다 . - 크롬 (버전 71.0.3578.98) 여전히 user-가는 문자를 입력 입력 할 수 있습니다
e및E필드에. 또한 이 질문을 참조하십시오 . - 파이어 폭스 (버전 64.0) 및 에지 (EdgeHTML 버전 17.17134)는 여전히 사용자가 입력 할 수 있는 필드에 텍스트를 입력합니다.
w3schools.com에서 직접 시도해 사용 .
내가 사용하는 기능은 다음과 가능합니다.
// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
return this.each(function()
{
$(this).keydown(function(e)
{
var key = e.charCode || e.keyCode || 0;
// allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
// home, end, period, and numpad decimal
return (
key == 8 ||
key == 9 ||
key == 13 ||
key == 46 ||
key == 110 ||
key == 190 ||
(key >= 35 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
});
});
};
그런 다음 다음을 수행하여 컨트롤에 수 있습니다.
$("#yourTextBoxName").ForceNumericOnly();
인라인 :
<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">눈에 잘 어울리지 않는 스타일 (jQuery 사용) :
$('input[name="number"]').keyup(function(e)
{
if (/\D/g.test(this.value))
{
// Filter non-digits from input value.
this.value = this.value.replace(/\D/g, '');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">단순한 JavaScript 정규식을 사용하여 순전히 숫자 문자를 테스트 할 수 있습니다.
/^[0-9]+$/.test(input);
입력이 숫자이면 true를 반환하고 false를 반환합니다.
또는 이벤트 키 코드의 경우 아래에서 간단하게 사용하십시오.
// Allow: backspace, delete, tab, escape, enter, ctrl+A and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
var charValue = String.fromCharCode(e.keyCode)
, valid = /^[0-9]+$/.test(charValue);
if (!valid) {
e.preventDefault();
}
다음과 같이 입력 이벤트에 사용할 수 있습니다.
$(document).on("input", ".numeric", function() {
this.value = this.value.replace(/\D/g,'');
});
그러나이 코드 특권은 무엇입니까?
- 모바일 브라우저에서 작동합니다 (keydown 및 keyCode에 문제가 있음).
- "on"을 사용하고 있기 때문에 AJAX 생성 콘텐츠 작동합니다.
- 예를 들어 넣기 넣기 이벤트에서 keydown보다 더 나은 성능.
짧고 달콤합니다-비록 30 개 이상의 답변 이후에 많은 관심을 받지만;)
$('#number_only').bind('keyup paste', function(){
this.value = this.value.replace(/[^0-9]/g, '');
});
JavaScript 함수 isNaN 사용 ,
if (isNaN($('#inputid').val()))
if (isNaN (document.getElementById ( 'inputid'). val ()))
if (isNaN(document.getElementById('inputid').value))
업데이트 : 여기에 대해 이야기하지만 jQuery 사용 : HTML 텍스트 상자의 입력을 숫자 값으로 제한 하는 멋진 가이드가 있습니다.
$(document).ready(function() {
$("#txtboxToFilter").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
});
출처 : http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
내부 공용 js 파일에서 이것을 사용합니다. 이 동작이 필요한 입력에 클래스를 추가하기 만하면됩니다.
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
나에게 더 간단한 것은
jQuery('.plan_eff').keyup(function () {
this.value = this.value.replace(/[^1-9\.]/g,'');
});
왜 그렇게 복잡합니까? HTML5 패턴이 있기 때문에 jQuery가 필요합니다.
<input type="text" pattern="[0-9]*">
멋진 점은 jQuery를 사용하는 것보다 훨씬 나은 모바일 장치에 숫자 키보드를 표시한다는 것입니다.
이 매우 간단한 솔루션을 사용하여 동일한 작업을 수행 할 수 있습니다.
$("input.numbers").keypress(function(event) {
return /\d/.test(String.fromCharCode(event.keyCode));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />솔루션 을 위해이 링크 를 참조했습니다 . 완벽하게 작동합니다 !!!
HTML5의 패턴 속성은 요소의 값이 확인되는 정규식을 지정합니다.
<input type="text" pattern="[0-9]{1,3}" value="" />
참고 : 패턴 속성은 텍스트, 검색, URL, 전화, 이메일 및 비밀번호와 같은 입력 유형에서 작동합니다.
[0-9]는 모든 정규 배열 조건으로 대체 될 수 있습니다.
{1,3} 최소 1을 쓸며 최대 3 자리까지 입력 할 수 있습니다.
HTML5 숫자 입력을 시도 할 수 있습니다 .
<input type="number" value="0" min="0">
비 호환 브라우저의 경우 Modernizr 및 Webforms2 폴 백이 있습니다.
jQuery.validate를 사용하는 매우 간단한 것
$(document).ready(function() {
$("#formID").validate({
rules: {
field_name: {
numericOnly:true
}
}
});
});
$.validator.addMethod('numericOnly', function (value) {
return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');
function suppressNonNumericInput (이벤트) {
if( !(event.keyCode == 8 // backspace
|| event.keyCode == 46 // delete
|| (event.keyCode >= 35 && event.keyCode <= 40) // arrow keys/home/end
|| (event.keyCode >= 48 && event.keyCode <= 57) // numbers on keyboard
|| (event.keyCode >= 96 && event.keyCode <= 105)) // number on keypad
) {
event.preventDefault(); // Prevent character input
}
}
다른 솔루션처럼 사용자가 텍스트를 선택하거나 복사하여 넣는 것을 막지 않는 아주 훌륭하고 간단한 솔루션을 찾았습니다. jQuery 스타일 :)
$("input.inputPhone").keyup(function() {
var jThis=$(this);
var notNumber=new RegExp("[^0-9]","g");
var val=jThis.val();
//Math before replacing to prevent losing keyboard selection
if(val.match(notNumber))
{ jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server
이 JavaScript 함수를 사용할 수 있습니다.
function maskInput(e) {
//check if we have "e" or "window.event" and use them as "event"
//Firefox doesn't have window.event
var event = e || window.event
var key_code = event.keyCode;
var oElement = e ? e.target : window.event.srcElement;
if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
if ((key_code > 47 && key_code < 58) ||
(key_code > 95 && key_code < 106)) {
if (key_code > 95)
key_code -= (95-47);
oElement.value = oElement.value;
} else if(key_code == 8) {
oElement.value = oElement.value;
} else if(key_code != 9) {
event.returnValue = false;
}
}
}
다음과 같이 텍스트 상자에 바인딩 할 수 있습니다.
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
위의 내용을 사용하고 완벽하게 작동하며 크로스 브라우저입니다. 또한 jQuery에 의존하지 않은 인라인 JavaScript를 사용하여 텍스트 상자에 바인딩 할 수 있습니다.
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
모두에게 도움이 될 것 같아요
$('input.valid-number').bind('keypress', function(e) {
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
})
위의 @ user261922의 게시물을 기반으로 내 글을 작성했습니다. 약간 수정하여 모든 탭을 선택하고 동일한 페이지에서 여러 "숫자 전용"필드를 처리 할 수 있습니다.
var prevKey = -1, prevControl = '';
$(document).ready(function () {
$(".OnlyNumbers").keydown(function (event) {
if (!(event.keyCode == 8 // backspace
|| event.keyCode == 9 // tab
|| event.keyCode == 17 // ctrl
|| event.keyCode == 46 // delete
|| (event.keyCode >= 35 && event.keyCode <= 40) // arrow keys/home/end
|| (event.keyCode >= 48 && event.keyCode <= 57) // numbers on keyboard
|| (event.keyCode >= 96 && event.keyCode <= 105) // number on keypad
|| (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id)) // ctrl + a, on same control
) {
event.preventDefault(); // Prevent character input
}
else {
prevKey = event.keyCode;
prevControl = event.currentTarget.id;
}
});
});
얼마 전에 만든 빠른 솔루션이 있습니다. 내 기사에서 더 자세히 읽을 수 있습니다.
http://ajax911.com/numbers-numeric-field-jquery/
$("#textfield").bind("keyup paste", function(){
setTimeout(jQuery.proxy(function() {
this.val(this.val().replace(/[^0-9]/g, ''));
}, $(this)), 0);
});
다음은 jQuery UI 위젯 팩토리를 사용하는 답변입니다. 허용되는 문자를 쉽게 사용자가 있습니다.
$('input').numberOnly({
valid: "0123456789+-.$,"
});
그것은 숫자, 숫자 기호 및 달러 금액을 허용합니다.
$.widget('themex.numberOnly', {
options: {
valid : "0123456789",
allow : [46,8,9,27,13,35,39],
ctrl : [65],
alt : [],
extra : []
},
_create: function() {
var self = this;
self.element.keypress(function(event){
if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
{
return;
}
if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
{
return;
}
if(event.altKey && self._codeInArray(event,self.options.alt))
{
return;
}
if(!event.shiftKey && !event.altKey && !event.ctrlKey)
{
if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
{
return;
}
}
event.preventDefault();
});
},
_codeInArray : function(event,codes) {
for(code in codes)
{
if(event.keyCode == codes[code])
{
return true;
}
}
return false;
}
});
이것은 깨지지 않는 것입니다.
// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
this.value = this.value.replace(/[^0-9\.]+/g, '');
if (this.value < 1) this.value = 0;
});
// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});
조금 돕고 싶어서 버전, onlyNumbers기능을 만들었습니다 .
function onlyNumbers(e){
var keynum;
var keychar;
if(window.event){ //IE
keynum = e.keyCode;
}
if(e.which){ //Netscape/Firefox/Opera
keynum = e.which;
}
if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
(event.keyCode >= 96 && event.keyCode <= 105)))return true;
if(keynum == 110 || keynum == 190){
var checkdot=document.getElementById('price').value;
var i=0;
for(i=0;i<checkdot.length;i++){
if(checkdot[i]=='.')return false;
}
if(checkdot.length==0)document.getElementById('price').value='0';
return true;
}
keychar = String.fromCharCode(keynum);
return !isNaN(keychar);
}
입력 태그 "... input ... id ="price "onkeydown ="return onlyNumbers (event) "..."를 추가하면 완료됩니다;)
나는 또한 대답하고 싶다 :)
$('.justNum').keydown(function(event){
var kc, num, rt = false;
kc = event.keyCode;
if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
return rt;
})
.bind('blur', function(){
num = parseInt($(this).val());
num = isNaN(num) ? '' : num;
if(num && num < 0) num = num*-1;
$(this).val(num);
});
그게 다야 .. 그냥 숫자. :) 거의 '흐림'과 함께 작동 할 수 있습니다 ...
탭을 허용하고 싶을 것입니다.
$("#txtboxToFilter").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
입력 값이 숫자 확인하는 간단한 방법은 다음과인지 확인합니다.
var checknumber = $('#textbox_id').val();
if(jQuery.isNumeric(checknumber) == false){
alert('Please enter numeric value');
$('#special_price').focus();
return;
}
Jquery 에서이 방법을 적용하기 만하면 숫자 만 허용하도록 텍스트 상자의 유효성을 검사 할 수 있습니다.
function IsNumberKeyWithoutDecimal(element) {
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp);
}
여기 에서이 솔루션을 사용해보십시오.
HTML5 숫자 입력을 시도 할 수 있습니다.
<input type="number" placeholder="enter the number" min="0" max="9">
이 입력 태그 요소는 이제 min 속성이 0으로 설정되고 max 속성이 9로 설정되므로 0에서 9 사이의 값만 사용합니다.
자세한 내용은 http://www.w3schools.com/html/html_form_input_types.asp 를 방문하십시오 .
숫자 키패드와 탭 키도 작동하는지 확인해야합니다.
// Allow only backspace and delete
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
}
else {
event.preventDefault();
}
}
'ProgramingTip' 카테고리의 다른 글
| RSA 키 지문 계산 (0) | 2020.09.28 |
|---|---|
| 올해는 어떻게 PHP를 사용합니까? (0) | 2020.09.28 |
| RecyclerView에서 항목 사이에 구분선과 공백을 추가하는 방법은 무엇입니까? (0) | 2020.09.28 |
| 값으로 선택 옵션 '선택됨'설정 (0) | 2020.09.28 |
| Xcode 프로젝트에 대한 Git 무시 파일 (0) | 2020.09.28 |