(0,1,2,3,4,5 … 9) 0-9와 같은 숫자 만 허용하려는 입력 텍스트 필드가있는 웹 페이지를 만들고 있습니다.
jQuery를 사용하여 어떻게 할 수 있습니까?
답변
참고 : 이것은 업데이트 된 답변입니다. 아래 주석은 키 코드로 엉망이 된 이전 버전을 나타냅니다.
jQuery
JSFiddle에서 직접 사용해보십시오 .
이를위한 기본 jQuery 구현은 없지만 <input>
다음 inputFilter
플러그인 을 사용하여 텍스트의 입력 값을 필터링 할 수 있습니다 (복사 + 붙여 넣기, 드래그 + 드롭, 키보드 단축키, 상황에 맞는 메뉴 작업, 입력 할 수없는 키, 캐럿 위치, 다른 키보드 레이아웃 및 IE 9 이후의 모든 브라우저 ) :
// Restricts input for the set of matched elements to the given inputFilter function.
(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);
} else {
this.value = "";
}
});
};
}(jQuery));
이제 inputFilter
플러그인을 사용하여 입력 필터를 설치할 수 있습니다 .
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
더 많은 입력 필터 예제 는 JSFiddle 데모 를 참조하십시오 . 또한 서버 측 유효성 검사를 수행해야합니다.
순수한 자바 스크립트 (jQuery 제외)
jQuery는 실제로 이것을 위해 필요하지 않습니다. 순수한 JavaScript로도 같은 일을 할 수 있습니다. 이 답변을 참조하십시오 .
HTML 5
HTML 5에는 다음과 같은 기본 솔루션이 있지만 ( 사양<input type="number">
참조 ) 브라우저 지원은 다양합니다.
- 대부분의 브라우저는 입력 할 때가 아니라 양식을 제출할 때만 입력의 유효성을 검사합니다.
- 대부분의 모바일 브라우저는 지원하지 않습니다
step
,min
및max
특성을. - 크롬 (버전 71.0.3578.98)는 여전히 사용자가 문자를 입력 할 수 있습니다
e
및E
필드에. 이 질문 도 참조하십시오 . - Firefox (버전 64.0) 및 Edge (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 생성 컨텐츠에서도 작동합니다.
- 붙여 넣기 이벤트와 같이 키 다운보다 성능이 향상되었습니다.
답변
짧고 달콤합니다-30 회 이상의 답변 후에도 많은 관심을 끌지 못할지라도;)
$('#number_only').bind('keyup paste', function(){
this.value = this.value.replace(/[^0-9]/g, '');
});
답변
를 사용하여 자바 스크립트가 작동 때는 isNaN을 ,
if (isNaN($('#inputid').val()))
if (isNaN (document.getElementById ( ‘inputid’). val ())))
if (isNaN(document.getElementById('inputid').value))
업데이트 :
여기에 관한 좋은 기사이지만 jQuery 사용 : HTML 텍스트 상자의 입력을 숫자 값으로 제한