HTML 텍스트 입력을 허용 숫자만 입력

StackOverflow https://stackoverflow.com/questions/469357

  •  19-08-2019
  •  | 
  •  

문제

이 있는 빠른 방법 설정하는 HTML 텍스트 입력(<input type=text /> 용)만 허용 숫자 키(플러스'.')?

도움이 되었습니까?

해결책

참고: 이것은 대답합니다.코멘트는 아래 참조하는 오래된 버전의는 엉망으로 키 코드.

JavaScript

이 setInputFilter 아래의 기능을 사용할 수 있습 모 종류의 입력을 필터에서는 텍스트 <input>, 을 포함한 다양한 숫자 필터를(아래 참조).

과는 달리 대부분의 다른 솔루션 올바르게 지원 Copy+붙여 넣기,끌어 놓으로,모든 바로 가기 키를 모든 작업 컨텍스트 메뉴,모든 비 typeable 키(예:커서 네비게이션 키),캐럿 위치에 모든 키보드 레이아웃의 모든 언어와 플랫폼 모든 때문에 브라우저 IE9.

너 자신을보십시오 에 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)
  • A-Z 만(i.e기본 문자로):
    /^[a-z]*$/i.test(value)
  • Latin 자 만(i.e영어,대부분의 유럽의 언어를 참조하십시오 https://unicode-table.com 에 대한 자세한 내용은 유니코드 문자 범위):
    /^[a-z\u00c0-\u024f]*$/i.test(value)
  • 수 값:
    /^[0-9a-f]*$/i.test(value)

참고로 당신은 아직도 야 오 서버의 측면 유효성 검사!

jQuery

또한 jQuery 버전입니다.보 이 답변 또 그것을 자신을 시도 에 JSFiddle.

HTML5

HTML5 는 네이티브 솔루션 <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", 그러나 그 미정이지만,이 2는 내가 생각해 낼 수있는 가장 간결한 방법입니다.

<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;
    }
};

Keypress 이벤트에도 첨부하십시오

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

및 HTML :

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

JSFiddle 예는 다음과 같습니다

html5가 있습니다 <input type=number>, 당신에게 옳은 소리. 현재 오페라만이 기본적으로 지원하지만 프로젝트 JavaScript 구현이 있습니다.

여기서 대부분의 답변은 모두 핵심 이벤트 사용의 약점이 있습니다..

많은 답변은 키보드 매크로, 복사+페이스트 및 더 원치 않는 동작으로 텍스트 선택을 수행하는 능력을 제한 할 것입니다.

이 간단한 솔루션은 입력 메커니즘 (키 스트로크, 복사+페이스트, 오른쪽 클릭 사본+페이스트, 음성-텍스트 등)에 관계없이 크로스 플랫폼에 가장 적합한 것으로 보입니다. 모든 텍스트 선택 키보드 매크로는 여전히 작동하며 스크립트별로 숫자가 아닌 값을 설정하는 능력을 제한 할 수도 있습니다.

function forceNumeric(){
    this.value(this.value.replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input.numeric-text', 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는 Regexes를 지원하므로 다음을 사용할 수 있습니다.

<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);"/ >

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);"/>

너무 간단하다 ....

// 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)'>

입력 MAX. (위의 12 자리 번호를 허용합니다)

더 안전한 접근법은 키 압력을 가로 채고 키 코드를 필터링하려는 대신 입력 값을 확인하는 것입니다.

이렇게하면 사용자는 키보드 화살표, 수정 자 키, 백 스페이스, 삭제, 비 표준 키보어 사용, 마우스 사용에 붙여 넣기, 드래그 앤 드롭 텍스트를 사용하고 접근성 입력을 사용 할 수 있습니다.

아래 스크립트는 양수와 음수를 허용합니다

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 id="numbers" pattern="[0-9.]+" type="number">

여기에서 완전한 모바일 웹 사이트 인터페이스 팁을 볼 수 있습니다..

알파 또는 숫자 사이의 장치 (아마도 휴대폰)에 제안하려면 사용할 수 있습니다. <input type="number">.

event.keycode 또는 event.hich :

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

타이핑 된 문자가 순간적으로 나타나는 작은 부작용 만 CTRL/CMD + A는 약간 이상한 행동을하는 것 같습니다.

자바 스크립트 코드 :

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이고 Regex 표현식이 허용되지 않기 때문에 완벽하게 작동하므로 버그를 우회하는 쉬운 방법입니다 :)

jQuery를 사용하는 다른 변형 

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

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)"/>

당신이 어디에 있는지 더 한 가지 더 ~할 수 있다 입력 필드에 숫자 만 추가하고 할 수 없습니다 편지

<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 = "숫자" 이제이 속성은 대부분의 브라우저에서 지원합니다

<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>

이 돔 사용 :

<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가없는이 스크립트는 2를 사용합니다. for'에스...

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();}
    }
}

OnkeyDown 속성이 OnKeypress 속성 전에 확인되므로 OnKeypress 대신 OnkeyDown 속성을 사용했습니다. 문제는 Google Chrome 브라우저에 있습니다.

"OnkeyPress"속성을 사용하면 Chrome의 "OreverDefault"와 함께 탭이 통제 할 수 없지만 "OnkeyDown"속성을 사용하면 탭이 제어 할 수있게됩니다!

탭 => 9에 대한 ASCII 코드

첫 번째 스크립트는 두 번째 스크립트보다 코드가 적지 만 ASCII 문자 배열에는 모든 키가 있어야합니다.

두 번째 스크립트는 첫 번째 스크립트보다 훨씬 크지 만 배열에 모든 키가 필요하지는 않습니다. 배열의 각 위치에서 첫 번째 숫자는 각 위치를 읽는 횟수입니다. 각각의 독서에 대해 다음은 1으로 증가합니다. 예를 들어:




ncount = 0

48 + ncount = 48

ncount + +

48 + ncount = 49

ncount + +

...

48 + ncount = 57




숫자 키의 경우 10 (0-9)에 불과하지만 백만이라면이 모든 키로 배열을 만드는 것은 의미가 없습니다.

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();
  }
}

최고의 방법(허용한 모든 유형의 실제 부정적인,부,긍정적 iinteger,부정적 정수 긍정적):

$(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 실제 입력 공간이 줄어들면서 up/아래쪽 화살표가 나타나고 추악하고 숫자가 수량을 나타내는 경우에만 유용합니다 (전화, 영역 코드, ID와 같은 것들 ... 필요하지 않음).tel 화살표가없는 숫자의 유사한 브라우저 검증을 제공합니다

숫자 / 전화]를 사용하면 모바일 장치에 숫자 키보드가 표시됩니다.

JS 유효성 검사를 위해서는 2 개의 기능이 필요했습니다. 하나는 일반 사용자 입력 (keypress)과 다른 하나는 복사+페이스트 수정 (변경)을 위해서는 끔찍한 사용자 경험을 제공합니다.

나는 그것을 사용한다 더 듬직 해요 KeyboardEvent.key 대신 keyboardevent.charcode

브라우저 지원에 따라 사용을 고려할 수 있습니다. Array.prototype.includes () 잘못된 이름 대신 Array.prototype.indexof () (참 / 거짓 결과)

이 문제를 해결하는 쉬운 방법은 jQuery 함수를 구현하는 것입니다.

HTML 코드 :

<input class="integerInput" type="text">

그리고 JS는 jQuery를 사용하여 기능합니다

$(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"/>

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top