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

^{참고 : 이것은 업데이트 된 답변입니다. 아래 주석은 키 코드로 엉망이 된 이전 버전을 나타냅니다.}

자바 스크립트

JSFiddle에서 직접 사용해보십시오 .

<input>다음 setInputFilter기능 을 사용하여 텍스트의 입력 값을 필터링 할 수 있습니다 (Copy + Paste, Drag + Drop, 키보드 단축키, 상황에 맞는 메뉴 작업, 입력 할 수없는 키, 캐럿 위치, 다른 키보드 레이아웃 및 IE 9 이후의 모든 브라우저 지원 ) :

// Restricts input for the given textbox to the given inputFilter function.
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);
      } else {
        this.value = "";
      }
    });
  });
}

이제이 setInputFilter기능을 사용하여 입력 필터를 설치할 수 있습니다 .

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

더 많은 입력 필터 예제 는 JSFiddle 데모 를 참조하십시오 . 또한 서버 측 유효성 검사를 수행해야합니다.

TypeScript

여기에 TypeScript 버전이 있습니다.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

이것의 jQuery 버전도 있습니다. 이 답변을 참조하십시오 .

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에서 직접 사용해보십시오 .

이 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]/,'')">

허용되지 않는 문자가 1 초 동안 표시되지 않고 삭제되기 전에 싫어하는 경우 아래 방법이 내 해결책입니다. 수많은 추가 조건에 유의하십시오. 이는 모든 종류의 탐색 및 핫키를 비활성화하지 않기위한 것입니다. 누구든지 이것을 압축하는 방법을 알고 있다면 알려주십시오!

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

다음은 jsFiddle 예제입니다

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

보다 안전한 방법은 키 누르기를 하이재킹하고 키 코드를 필터링하는 대신 입력 값을 확인하는 것입니다.

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

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

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>

편집 : 나는 그것이 구식이라고 생각하기 때문에 이전 답변을 제거했습니다.

이를 위해 패턴을 사용할 수 있습니다.

<input id="numbers" pattern="[0-9.]+" type="number">

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

아래에 언급 된 해결책을 찾으십시오. 이 사용자 만 입력 할 수있다에서 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">.

입력 필드에 숫자 만 추가 할 수 있고 문자 는 입력 할 수없는 또 하나의 예

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

event.keyCode 또는 event. 대신 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 함수를 구현하는 것입니다.

귀하의 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"/>


		

jQuery를 사용하는 다른 변형

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

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
}

그러나 키업 등과 같은 이벤트에 바인딩해야합니다.

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

나는 훌륭한 답변을 보았지만 가능한 작고 간단한 것을 좋아하므로 누군가가 혜택을 볼 수 있습니다. 다음 Number()과 isNaN같이 자바 스크립트 와 기능을 사용 합니다.

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

도움이 되었기를 바랍니다.

이 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의를 ...

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 속성을 사용했습니다. Chrome 브라우저에 문제가 있습니다.

"onkeypress"속성을 사용하면 Google 크롬에서 "preventDefault"를 사용하여 TAB를 제어 할 수 없지만 "onkeydown"속성을 사용하면 TAB을 제어 할 수 있습니다!

TAB의 ASCII 코드 => 9

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

두 번째 스크립트는 첫 번째 스크립트보다 훨씬 크지 만 배열에 모든 키가 필요한 것은 아닙니다. 배열의 각 위치에서 첫 번째 숫자는 각 위치를 읽는 횟수입니다. 각 판독 값에 대해 다음 판독 값으로 1 씩 증가합니다. 예를 들면 다음과 같습니다.




NCount = 0

48 + N 카운트 = 48

N 카운트 + +

48 + N 카운트 = 49

N 카운트 + +

...

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

가장 좋은 방법은 (모든 유형의 숫자-실수 음수, 실수 양수, 정수 음수, 정수 양수)입니다.

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