HTML 텍스트 입력은 숫자 입력 만 허용합니다.
<input type=text />숫자 키 입력 (+ '.') 만 허용하도록 HTML 텍스트 입력 ( ) 을 설정하는 빠른 방법이 있습니까?
참고 : 이것은 업데이트 된 답변입니다. 아래 주석은 키 코드를 엉망으로 만든 이전 버전을 나타냅니다.
자바 스크립트
setInputFilter기능은 아래에 사용할 수 있는 텍스트에 입력 필터의 종류의 <input>다양한 숫자 필터 (아래 참조)를 포함.
대부분의 다른 솔루션과 달리 복사 + 붙여 넣기, 드래그 + 드롭, 모든 키보드 단축키, 모든 상황에 맞는 메뉴 작업, 입력 할 수없는 모든 키 (예 : 커서 및 탐색 키), 캐럿 위치, 모든 언어 및 플랫폼의 모든 키보드 레이아웃을 올바르게 지원 합니다. , 그리고 IE 9 이후의 모든 브라우저 .
JSFiddle에서 직접 시도해보십시오 .
// Restricts input for the given textbox to the given inputFilter.
function setInputFilter(textbox, inputFilter) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
textbox.addEventListener(event, 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);
}
});
});
}
// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\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)
여전히 서버 측 유효성 검사를 수행 해야합니다 !
jQuery
이것의 jQuery 버전도 있습니다. 참조 이 대답을 하거나 스스로를 시도 JSFiddle에 .
HTML 5
HTML 5에는 <input type="number">( 사양 참조) 기본 솔루션이 있지만 브라우저 지원은 다양합니다.
- 대부분의 브라우저는 입력 할 때가 아니라 양식을 제출할 때만 입력을 확인합니다.
- 대부분의 모바일 브라우저 는
step,min및max속성을 지원하지 않습니다 . - 크롬 (버전 71.0.3578.98)는 여전히 사용자가 문자를 입력 할 수 있습니다
e및E필드에. 또한 이 질문을 참조하십시오 . - 파이어 폭스 (버전 64.0) 및 에지 (EdgeHTML 버전 17.17134)는 여전히 사용자가 입력 할 수 있는 필드에 텍스트를.
w3schools.com에서 직접 시도해보십시오 .
이 DOM 사용
<input type='text' onkeypress='validate(event)' />
그리고이 스크립트
function validate(evt) {
var theEvent = evt || window.event;
// Handle paste
if (theEvent.type === 'paste') {
key = event.clipboardData.getData('text/plain');
} else {
// Handle key press
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
}
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
나는 이것에 대한 좋은 답을 찾기 위해 길고 열심히 노력 해왔고 우리는 절실히 필요 <input type="number"하지만,이 두 가지는 내가 생각 해낼 수있는 가장 간결한 방법입니다.
<input type="text"
onkeyup="this.value=this.value.replace(/[^\d]/,'')">
지워지기 전에 잠시 동안 표시되는 허용되지 않는 문자가 마음에 들지 않으면 아래 방법이 내 해결책입니다. 수많은 추가 조건에 유의하십시오. 이것은 모든 종류의 탐색 및 핫키를 비활성화하는 것을 방지하기위한 것입니다. 이것을 압축하는 방법을 아는 사람이 있으면 알려주십시오!
<input type="text"
onkeydown="return ( event.ctrlKey || event.altKey
|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
|| (95<event.keyCode && event.keyCode<106)
|| (event.keyCode==8) || (event.keyCode==9)
|| (event.keyCode>34 && event.keyCode<40)
|| (event.keyCode==46) )">
다음은 정확히 하나의 소수만 허용하는 간단한 것입니다.
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />그리고 저에게 좋은 예가 하나 더 있습니다.
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 || event.keyCode === 46) {
return true;
} else if ( key < 48 || key > 57 ) {
return false;
} else {
return true;
}
};
키 누르기 이벤트에도 연결
$(document).ready(function(){
$('[id^=edit]').keypress(validateNumber);
});
그리고 HTML :
<input type="input" id="edit1" value="0" size="5" maxlength="5" />
HTML5에는 <input type=number>. 현재 Opera만이 기본적으로 지원하지만 JavaScript 구현 이 있는 프로젝트 가 있습니다.
여기에서 대부분의 답변은 모두 키 이벤트 사용의 약점을 가지고 있습니다 .
대부분의 답변은 키보드 매크로, 복사 + 붙여 넣기 및 더 원치 않는 동작으로 텍스트 선택을 수행하는 능력을 제한하고, 다른 것들은 기관총으로 파리를 죽이는 특정 jQuery 플러그인에 의존하는 것처럼 보입니다.
이 간단한 솔루션은 입력 메커니즘 (키 입력, 복사 + 붙여 넣기, 마우스 오른쪽 버튼 클릭 복사 + 붙여 넣기, 음성-텍스트 등)에 관계없이 크로스 플랫폼에서 가장 잘 작동하는 것 같습니다. 모든 텍스트 선택 키보드 매크로는 여전히 작동하며 스크립트로 숫자가 아닌 값을 설정하는 기능도 제한합니다.
function forceNumeric(){
var $input = $(this);
$input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);
나는 여기에 언급 된 두 가지 답변의 조합을 사용하기로 결정했습니다.
<input type="number" />
과
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
<input type="text" onkeypress="return isNumberKey(event);">
HTML5는 정규식을 지원하므로 다음을 사용할 수 있습니다.
<input id="numbersOnly" pattern="[0-9.]+" type="text">
경고 : 일부 브라우저는 아직이를 지원하지 않습니다.
자바 스크립트
function validateNumber(evt) {
var e = evt || window.event;
var key = e.keyCode || e.which;
if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
// numbers
key >= 48 && key <= 57 ||
// Numeric keypad
key >= 96 && key <= 105 ||
// Backspace and Tab and Enter
key == 8 || key == 9 || key == 13 ||
// Home and End
key == 35 || key == 36 ||
// left and right arrows
key == 37 || key == 39 ||
// Del and Ins
key == 46 || key == 45) {
// input is VALID
}
else {
// input is INVALID
e.returnValue = false;
if (e.preventDefault) e.preventDefault();
}
}
추가로 쉼표, 마침표 및 빼기 (, .-)를 추가 할 수 있습니다.
// comma, period and minus, . on keypad
key == 190 || key == 188 || key == 109 || key == 110 ||
HTML
<input type="text" onkeydown="validateNumber(event);"/ >
너무 간단 ....
// JavaScript 함수에서 (HTML 또는 PHP 사용 가능).
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
양식 입력에서 :
<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>
최대 입력. (위에서 12 자리 숫자를 허용합니다)
2 가지 솔루션 :
양식 유효성 검사기 사용 (예 : jQuery 유효성 검사 플러그인 사용 )
입력 필드의 onblur (즉, 사용자가 필드를 떠날 때) 이벤트 동안 정규식을 사용하여 확인을 수행하십시오.
<script type="text/javascript">
function testField(field) {
var regExpr = new RegExp("^\d*\.?\d*$");
if (!regExpr.test(field.value)) {
// Case of error
field.value = "";
}
}
</script>
<input type="text" ... onblur="testField(this);"/>
이를 위해 패턴을 사용할 수 있습니다.
<input id="numbers" pattern="[0-9.]+" type="number">
여기에서 전체 모바일 웹 사이트 인터페이스 도움말을 볼 수 있습니다 .
더 안전한 접근 방식은 키 누름을 가로 채고 keyCode를 필터링하는 대신 입력 값을 확인하는 것입니다.
이러한 방식으로 사용자는 키보드 화살표, 수정 자 키, 백 스페이스, 삭제, 비표준 키 보어 사용, 마우스를 사용하여 붙여 넣기, 텍스트 끌어서 놓기, 접근성 입력 사용 등을 자유롭게 사용할 수 있습니다.
아래 스크립트는 양수와 음수를 허용합니다.
1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed
var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;
//enforce that only a float can be inputed
function enforceFloat() {
var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
if (!valid.test(this.value)) {
var n = this.value.match(number);
this.value = n ? n[0] : '';
}
}<input id="number" value="-3.1415" placeholder="Type a number" autofocus>편집 : 지금은 구식이라고 생각하기 때문에 이전 답변을 제거했습니다.
아래에서 언급 한 해결책을 찾으십시오. 이 사용자 만 입력 할 수있다에서 numeric값을, 또한 사용자가 할 수없는 copy, paste, drag및 drop입력한다.
허용되는 문자
0,1,2,3,4,5,6,7,8,9
이벤트를 통해 허용되지 않는 캐릭터 및 캐릭터
- 알파벳 값
- 특수 문자
- 부
- 풀
- 견인
- 하락
$(document).ready(function() {
$('#number').bind("cut copy paste drag drop", function(e) {
e.preventDefault();
});
});
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">작동하지 않으면 알려주세요.
영문 또는 숫자 사이에서 장치 (휴대폰 일 수 있음)를 제안하려면을 사용할 수 있습니다 <input type="number">.
event.keyCode 또는 event.which를 보는 대신 jQuery 및 replace ()를 사용하는 짧고 달콤한 구현 :
$('input.numeric').live('keyup', function(e) {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
입력 한 글자가 잠시 나타나고 CTRL / CMD + A가 조금 이상하게 동작하는 작은 부작용 만 있습니다.
input type="number" HTML5 속성입니다.
다른 경우 다음과 같이 도움이됩니다.
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>
자바 스크립트 코드 :
function validate(evt)
{
if(evt.keyCode!=8)
{
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[0-9]|\./;
if (!regex.test(key))
{
theEvent.returnValue = false;
if (theEvent.preventDefault)
theEvent.preventDefault();
}
}
}
HTML 코드 :
<input type='text' name='price' value='0' onkeypress='validate(event)'/>
백 스페이스 키 코드가 8이고 정규 표현식이 허용하지 않기 때문에 완벽하게 작동하므로 버그를 우회하는 쉬운 방법입니다. :)
jQuery를 사용하는 다른 변형
$(".numeric").keypress(function() {
return (/\d/.test(String.fromCharCode(event.which) ))
});
하나 더 예를 들어 어디 수 , 입력 필드에 숫자 만 추가 할 수없는 문자
<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
이제 대부분의 브라우저에서이 속성을 지원하는 type = "number"를 사용 하십시오.
<input type="number" maxlength="3" ng-bind="first">
다음과 같이 입력 값 (기본적으로 문자열로 처리됨)을 숫자로 강제 된 값과 비교할 수도 있습니다.
if(event.target.value == event.target.value * 1) {
// returns true if input value is numeric string
}
그러나이를 keyup 등과 같은 이벤트에 바인딩해야합니다.
<input name="amount" type="text" value="Only number in here"/>
<script>
$('input[name=amount]').keyup(function(){
$(this).val($(this).val().replace(/[^\d]/,''));
});
</script>
이 DOM 사용 :
<input type = "text" onkeydown = "validate(event)"/>
그리고이 스크립트 :
validate = function(evt)
{
if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
{
evt.returnValue = false;
if(evt.preventDefault){evt.preventDefault();}
}
}
... 또는이 스크립트는 indexOf없이 두 개의 for's ...
validate = function(evt)
{
var CharValidate = new Array("08", "046", "039", "948", "235");
var number_pressed = false;
for (i = 0; i < 5; i++)
{
for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
{
if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
{
number_pressed = true;
}
}
}
if (number_pressed == false)
{
evt.returnValue = false;
if(evt.preventDefault){evt.preventDefault();}
}
}
onkeypress 속성이 onkeypress 속성보다 먼저 확인되기 때문에 onkeypress 대신 onkeydown 속성을 사용했습니다. 문제는 Google Chrome 브라우저에 있습니다.
"onkeypress"속성을 사용하면 Google 크롬에서 "preventDefault"를 사용하여 TAB를 제어 할 수 없지만 "onkeydown"속성을 사용하면 TAB를 제어 할 수 있습니다!
TAB의 ASCII 코드 => 9
첫 번째 스크립트는 두 번째 스크립트보다 코드가 적지 만 ASCII 문자 배열에는 모든 키가 있어야합니다.
두 번째 스크립트는 첫 번째 스크립트보다 훨씬 크지 만 배열에 모든 키가 필요하지는 않습니다. 배열의 각 위치에있는 첫 번째 숫자는 각 위치를 읽는 횟수입니다. 각 판독 값에 대해 다음 값으로 1 씩 증가합니다. 예 :
NCount = 0
48 + NCount = 48
NCount + +
48 + NCount = 49
NCount + +
...
48 + NCount = 57
숫자 키의 경우 10 (0-9)에 불과하지만 100 만 개라면이 모든 키로 배열을 만드는 것은 의미가 없습니다.
ASCII 코드 :
- 8 ==> (백 스페이스);
- 46 => (삭제);
- 37 => (왼쪽 화살표);
- 39 => (오른쪽 화살표);
- 48-57 => (숫자);
- 36 => (집);
- 35 => (끝);
이것은 개선 된 기능입니다.
function validateNumber(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}
가장 좋은 방법 (모든 유형의 숫자 허용-실수 음수, 실수 양수, 정수 음수, 정수 양수)은 다음과 같습니다.
$(input).keypress(function (evt){
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
var objRegex = /^-?\d*[\.]?\d*$/;
var val = $(evt.target).val();
if(!regex.test(key) || !objRegex.test(val+key) ||
!theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
};
});
이것은 geowa4 솔루션 의 확장 버전입니다 . 지원 min및 max속성. 숫자가 범위를 벗어나면 이전 값이 표시됩니다.
용법: <input type=text class='number' maxlength=3 min=1 max=500>
function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key)) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
}
$(document).ready(function(){
$("input[type=text]").filter(".number,.NUMBER").on({
"focus":function(e){
$(e.target).data('oldValue',$(e.target).val());
},
"keypress":function(e){
e.target.oldvalue = e.target.value;
number(e);
},
"change":function(e){
var t = e.target;
var min = $(t).attr("min");
var max = $(t).attr("max");
var val = parseInt($(t).val(),10);
if( val<min || max<val)
{
alert("Error!");
$(t).val($(t).data('oldValue'));
}
}
});
});
입력이 동적이면 다음을 사용하십시오.
$(document).ready(function(){
$("body").on("focus","input[type=text].number,.NUMBER",function(e){
$(e.target).data('oldValue',$(e.target).val());
});
$("body").on("keypress","input[type=text].number,.NUMBER",function(e){
e.target.oldvalue = e.target.value;
number(e);
});
$("body").on("change","input[type=text].number,.NUMBER",function(e){
var t = e.target
var min = $(t).attr("min");
var max = $(t).attr("max");
var val = parseInt($(t).val());
if( val<min || max<val)
{
alert("Error!");
$(t).val($(t).data('oldValue'));
}
});
});
더 나은 사용자 경험을위한 솔루션 :
HTML
<input type="tel">
jQuery
$('[type=tel]').on('change', function(e) {
$(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
keys = ['0','1','2','3','4','5','6','7','8','9','.']
return keys.indexOf(event.key) > -1
})
세부:
먼저 입력 유형 :
number실제 입력 공간을 축소하는 위쪽 / 아래쪽 화살표를 표시합니다. 나는 숫자가 수량을 나타내는 경우에만 유용합니다 (전화, 지역 번호, ID와 같은 것 ... 필요하지 않음) tel없이 유사한 브라우저 유효성 검사를 제공합니다. 화살
[숫자 / 전화]를 사용하면 모바일 장치에서 숫자 키보드를 표시하는 데 도움이됩니다.
JS 유효성 검사의 경우 일반 사용자 입력 (키 누르기) 및 복사 + 붙여 넣기 수정 (변경)을위한 두 가지 기능이 필요했습니다. 다른 조합은 끔찍한 사용자 경험을 제공합니다.
이제 사용되지 않는 KeyboardEvent.charCode 대신 더 안정적인 KeyboardEvent.key 를 사용합니다.
그리고 당신의 브라우저 지원의 따라 당신은 사용을 고려 할 수 있습니다 ) (Array.prototype.includes을 대신 가난라는 이름의 Array.prototype.indexOf () (참 / 거짓 결과)
이 문제를 해결하는 쉬운 방법은 예를 들어 텍스트 상자에 입력 된 문자를 정규식으로 확인하는 jQuery 함수를 구현하는 것입니다.
귀하의 HTML 코드 :
<input class="integerInput" type="text">
그리고 jQuery를 사용하는 js 함수
$(function() {
$('.integerInput').on('input', function() {
this.value = this.value
.replace(/[^\d]/g, '');// numbers and decimals only
});
});
$(function() {
$('.integerInput').on('input', function() {
this.value = this.value
.replace(/[^\d]/g, '');// numbers and decimals only
});
});<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>
<input type="text" class="integerInput"/>
참고 URL : https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input
'development' 카테고리의 다른 글
| Docker 이미지는 호스트 머신에서 어디에 저장됩니까? (0) | 2020.09.29 |
|---|---|
| LF를 CRLF로 대체하는 자식 (0) | 2020.09.29 |
| BOM이없는 UTF-8과 UTF-8의 차이점은 무엇입니까? (0) | 2020.09.29 |
| Unix 도구로 JSON 구문 분석 (0) | 2020.09.29 |
| 현재 작업 디렉토리의 변경 사항에서 git 패치를 만듭니다. (0) | 2020.09.29 |