텍스트 상자에 대한 입력 제한 : 숫자와 소수점 만 허용

107

숫자와 소수점 만 허용하도록 텍스트 상자에 입력을 제한하려면 어떻게해야합니까?

javascript  html 
— TinTin
소스
11
그의 원래 질문은 훌륭했습니다, Amar ... !!! 왜 바꿔 ..? ;)
— SpikETidE
14
왜 반대표를해야합니까? 그 사람은 여기 새로 왔어요. 그의 퀘스트를 개선 할 수 있도록 도와주세요, plz.
— lexu
Ayyappan.Anbalagan, 게시물에 몇 가지 예를 추가하세요. :)이 모든 문자열이 맞습니까? 192 192.168 192.168.0.1
— lak-b
나는 그것을 사람 감사합니다 .. 단지 22.22 편대 또한 txtbox에 5 문자 만 허용해야합니다 ...
— TinTin
문제는 무엇 isNaN(this.textbox.value)입니까 ??
— Sam007 2013 년

답변:

158 

<HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>
스 니펫 확장

이것은 정말로 작동합니다!

— Rebisco
소스
1
&& charCode> 31이 필요한 이유는 무엇입니까?
— contactmatt
2
31 번 문자는 단위 구분 코드입니다. 거의 많은 숫자와 텍스트가 32 이상입니다. 코드는 입력 된 문자 코드가 10 진수가 아니고 31 (단위 구분 기호)보다 높지만 48 (숫자 0)보다 작거나 57 (숫자 9)보다 큰 경우이를 받아들이지 마십시오.
— Paul Williams
9
if (charCode == 46 && evt.srcElement.value.split ( '.'). length> 1) {return false; } 그것은 여러 privent합니다 .'... :
— 아니시 카루 나카 란에게
10
키패드 숫자 및 마침표 포함 :&& charCode != 190 && charCode != 110 && (charCode > 105 || charCode < 96)
— mga
1
하나 이상의 '를 수락하고 있습니다. [마침표] '는 잘못된 것 같습니다.
— Akshay Chawla
26 
form.onsubmit = function(){
    return textarea.value.match(/^\d+(\.\d+)?$/);
}

이것이 당신이 찾고있는 것입니까?

도움이되기를 바랍니다.

편집 : 마침표가 하나만있을 수 있도록 위의 예제를 편집했습니다. 마침표는 하나 이상이고 그 뒤에는 하나 이상의 숫자가 있습니다.

— 타우
소스
1
이것은 또한 '99 .23.65.86 '의 유효성을 검사 할 것이라고 생각합니다. ....하지만 질문은 단일 점으로'56987.32 '유효성을 검사하는 것에 관한 것이 었습니다 .....
— SpikETidE
포스터가 원래 질문을 편집 한 것 같습니다. 업데이트 주셔서 감사합니다!
— tau
1
/^\d+([\.,]\d+)?$/를 사용하여 국제 전화 번호를 지원하는 것이 좋습니다 (점 대신 쉼표가 사용됨)
— FDIM 2014 년
26

예를 들어 24 .... 22..22와 같이 여러 개의 '.'를 입력 할 수 있으므로 허용되는 솔루션이 완전하지 않습니다. 약간의 수정으로 의도 한대로 작동합니다.

<html>

<head>
  <script type="text/javascript">
    function isNumberKey(txt, evt) {
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode == 46) {
        //Check if the text already contains the . character
        if (txt.value.indexOf('.') === -1) {
          return true;
        } else {
          return false;
        }
      } else {
        if (charCode > 31 &&
          (charCode < 48 || charCode > 57))
          return false;
      }
      return true;
    }
  </script>
</head>

<body>
  <input type="text" onkeypress="return isNumberKey(this, event);" />
</body>

</html>
스 니펫 확장

— 하산 목 다드
소스
귀하의 답변을 사용했지만이 onkeypress = "return isNumberKey (this, event);"를 수정했습니다.
— Bilbo Baggins
그래, 난,이 두 경우 모두에서 작동하기 때문에이 이벤트를 전달 입력 선택 사항입니다 덕분에 생각
— 하산 Mokdad
우리에게 몇 가지 키 스트로크 .. TQ 저장
— (Irf)에
이것의 유일한 문제는 텍스트에 붙여 넣기를 복사 할 수 있다는 것입니다. 입력 요소에 추가하면 ondrop="return false;" onpaste="return false;" oncontextmenu="return false;"충분한 것 같다
— clamchoda
끌어서 놓기 또는 복사하여 붙여 넣기를 사용하지 못하게하는 것은 모든 사용자에게 잘못된 서비스입니다.
— Hubert Grzeskowiak 19
19

다음은 십진수를 허용하고 소수점 이하 자릿수를 소수점 이하 2 자리로 제한하는 또 다른 솔루션입니다.

function isNumberKey(evt, element) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8))
    return false;
  else {
    var len = $(element).val().length;
    var index = $(element).val().indexOf('.');
    if (index > 0 && charCode == 46) {
      return false;
    }
    if (index > 0) {
      var CharAfterdot = (len + 1) - index;
      if (CharAfterdot > 3) {
        return false;
      }
    }

  }
  return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="rate" placeholder="Billing Rate" required onkeypress="return isNumberKey(event,this)">
스 니펫 확장

— 쿠레나이 쿠나이
소스
거의 완벽합니다. 마지막 조건은 if대문자 "C"가 누락 된 것 입니다.
— DNKROZ
아름다운 솔루션 !!
— 마이클 머레이
아름답다. 나를 위해 완벽하게 작동합니다.
— Noor Ahmed
이 솔루션은 텍스트를 필드에 붙여 넣거나 놓을 때 여러 개의 점 ( .), 대시 ( -) 및 문자를 허용 e합니다. HTML 요소는 Chrome에서 기본적으로 숫자를 늘리거나 줄이는 두 개의 화살표도 표시합니다. 감소 버튼을 사용하면 숫자가 0 아래로 떨어질 수 있습니다.
— Hubert Grzeskowiak
12

여기에 제시된 모든 솔루션은 단일 키 이벤트를 사용합니다. copy'n'paste 또는 drag'n'drop을 사용하여 입력을 제공 할 수도 있기 때문에 이것은 오류가 발생하기 쉽습니다. 또한 솔루션의 일부는 키가 같은 비 문자의 사용 제한 ctrl+c, Pos1등

모든 키 누름을 확인하는 대신 결과가 예상과 관련하여 유효한지 확인하는 것이 좋습니다.

var validNumber = new RegExp(/^\d*\.?\d*$/);
var lastValid = document.getElementById("test1").value;
function validateNumber(elem) {
  if (validNumber.test(elem.value)) {
    lastValid = elem.value;
  } else {
    elem.value = lastValid;
  }
}
<textarea id="test1" oninput="validateNumber(this);" ></textarea>
스 니펫 확장

이 oninput이벤트는 텍스트 영역에서 무언가가 변경된 직후와 렌더링되기 전에 트리거됩니다.

허용하려는 숫자 형식으로 RegEx를 확장 할 수 있습니다. 이것은 단일 키 누름을 확인하는 것보다 훨씬 더 유지 관리 및 확장이 가능합니다.

— Hubert Grzeskowiak
소스
이것은 가장 우아한 솔루션입니다!
— jkd
4

이와 같은 것을 찾고 있습니까?

   <HTML>
   <HEAD>
   <SCRIPT language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }
      //-->
   </SCRIPT>
   </HEAD>
   <BODY>
      <INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
   </BODY>
  </HTML>
— 락 -b
소스
4

Jquery에서이 방법을 적용하기 만하면 십진수로만 숫자를 받아들이도록 텍스트 상자의 유효성을 검사 할 수 있습니다.

function IsFloatOnly(element) {    
var value = $(element).val(); 
var regExp ="^\\d+(\\.\\d+)?$";
return value.match(regExp); 
}

여기에서 작동 데모를 참조 하십시오.

— 지 텐더 쿠마르
소스
2

내가 한 것처럼 여기에서 걸림돌이되는 사람을 위해 여기에 리소스 집약적이지만 저에게 잘 작동하는 jQuery 1.10.2 버전이 있습니다.

/***************************************************
* Only allow numbers and one decimal in text boxes
***************************************************/
$('body').on('keydown keyup keypress change blur focus paste', 'input[type="text"]', function(){
    var target = $(this);

    var prev_val = target.val();

    setTimeout(function(){
        var chars = target.val().split("");

        var decimal_exist = false;
        var remove_char = false;

        $.each(chars, function(key, value){
            switch(value){
                case '0':
                case '1':
                case '2':
                case '3':
                case '4':
                case '5':
                case '6':
                case '7':
                case '8':
                case '9':
                case '.':
                    if(value === '.'){
                        if(decimal_exist === false){
                            decimal_exist = true;
                        }
                        else{
                            remove_char = true;
                            chars[''+key+''] = '';
                        }
                    }
                    break;
                default:
                    remove_char = true;
                    chars[''+key+''] = '';
                    break;
            }
        });

        if(prev_val != target.val() && remove_char === true){
            target.val(chars.join(''))
        }
    }, 0);
});
— MonkeyZeus
소스
2

소수를 완벽하게 검증하기 위해 @rebisco의 훌륭한 답변에 대한 작은 수정.

function isNumberKey(evt) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode == 46 && evt.srcElement.value.split('.').length>1) {
        return false;
    }
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
— 아니 쉬 카루 나카 란
소스
이것은 아주 좋습니다. 그러나 어쨌든 소수점 2 자리로 제한하고 싶습니다.
— nodeffect
2

float 값에 대해 원하는 경우

내가 사용하는 기능은 다음과 같습니다.

<HTML>

<HEAD>
  <SCRIPT language=Javascript>
    <!--
    function check(e, value) {
      //Check Charater
      var unicode = e.charCode ? e.charCode : e.keyCode;
      if (value.indexOf(".") != -1)
        if (unicode == 46) return false;
      if (unicode != 8)
        if ((unicode < 48 || unicode > 57) && unicode != 46) return false;
    }
    //-->
  </SCRIPT>
</HEAD>

<BODY>
  <INPUT id="txtChar" onkeypress="return check(event,value)" type="text" name="txtChar">
</BODY>

</HTML>
스 니펫 확장

— 라훌
소스
1 
inputelement.onchange= inputelement.onkeyup= function isnumber(e){
    e= window.event? e.srcElement: e.target;
    while(e.value && parseFloat(e.value)+''!= e.value){
            e.value= e.value.slice(0, -1);
    }
}
— 케네 벡
소스
1 
function integerwithdot(s, iid){
        var i;
        s = s.toString();
        for (i = 0; i < s.length; i++){
            var c;
            if (s.charAt(i) == ".") {
            } else {
                c = s.charAt(i);
            }
            if (isNaN(c)) {
                c = "";
                for(i=0;i<s.length-1;i++){
                    c += s.charAt(i);
                }
                document.getElementById(iid).value = c;
                return false;
            }
        }
        return true;
    }
— 조나스 레이 시안
소스
1

여기 CAS가 당신을 돕는 스크립트가 있습니다.

<script type="text/javascript">
// price text-box allow numeric and allow 2 decimal points only
function extractNumber(obj, decimalPlaces, allowNegative)
{
    var temp = obj.value;

    // avoid changing things if already formatted correctly
    var reg0Str = '[0-9]*';
    if (decimalPlaces > 0) {
        reg0Str += '\[\,\.]?[0-9]{0,' + decimalPlaces + '}';
    } else if (decimalPlaces < 0) {
        reg0Str += '\[\,\.]?[0-9]*';
    }
    reg0Str = allowNegative ? '^-?' + reg0Str : '^' + reg0Str;
    reg0Str = reg0Str + '$';
    var reg0 = new RegExp(reg0Str);
    if (reg0.test(temp)) return true;

    // first replace all non numbers
    var reg1Str = '[^0-9' + (decimalPlaces != 0 ? '.' : '') + (decimalPlaces != 0 ? ',' : '') + (allowNegative ? '-' : '') + ']';
    var reg1 = new RegExp(reg1Str, 'g');
    temp = temp.replace(reg1, '');

    if (allowNegative) {
        // replace extra negative
        var hasNegative = temp.length > 0 && temp.charAt(0) == '-';
        var reg2 = /-/g;
        temp = temp.replace(reg2, '');
        if (hasNegative) temp = '-' + temp;
    }

    if (decimalPlaces != 0) {
        var reg3 = /[\,\.]/g;
        var reg3Array = reg3.exec(temp);
        if (reg3Array != null) {
            // keep only first occurrence of .
            //  and the number of places specified by decimalPlaces or the entire string if decimalPlaces < 0
            var reg3Right = temp.substring(reg3Array.index + reg3Array[0].length);
            reg3Right = reg3Right.replace(reg3, '');
            reg3Right = decimalPlaces > 0 ? reg3Right.substring(0, decimalPlaces) : reg3Right;
            temp = temp.substring(0,reg3Array.index) + '.' + reg3Right;
        }
    }

    obj.value = temp;
}
function blockNonNumbers(obj, e, allowDecimal, allowNegative)
{
    var key;
    var isCtrl = false;
    var keychar;
    var reg;
    if(window.event) {
        key = e.keyCode;
        isCtrl = window.event.ctrlKey
    }
    else if(e.which) {
        key = e.which;
        isCtrl = e.ctrlKey;
    }

    if (isNaN(key)) return true;

    keychar = String.fromCharCode(key);

    // check for backspace or delete, or if Ctrl was pressed
    if (key == 8 || isCtrl)
    {
        return true;
    }

    reg = /\d/;
    var isFirstN = allowNegative ? keychar == '-' && obj.value.indexOf('-') == -1 : false;
    var isFirstD = allowDecimal ? keychar == '.' && obj.value.indexOf('.') == -1 : false;
    var isFirstC = allowDecimal ? keychar == ',' && obj.value.indexOf(',') == -1 : false;
    return isFirstN || isFirstD || isFirstC || reg.test(keychar);
}
function blockInvalid(obj)
{
    var temp=obj.value;
    if(temp=="-")
    {
        temp="";
    }

    if (temp.indexOf(".")==temp.length-1 && temp.indexOf(".")!=-1)
    {
        temp=temp+"00";
    }
    if (temp.indexOf(".")==0)
    {
        temp="0"+temp;
    }
    if (temp.indexOf(".")==1 && temp.indexOf("-")==0)
    {
        temp=temp.replace("-","-0") ;
    }
    if (temp.indexOf(",")==temp.length-1 && temp.indexOf(",")!=-1)
    {
        temp=temp+"00";
    }
    if (temp.indexOf(",")==0)
    {
        temp="0"+temp;
    }
    if (temp.indexOf(",")==1 && temp.indexOf("-")==0)
    {
        temp=temp.replace("-","-0") ;
    }
    temp=temp.replace(",",".") ;
    obj.value=temp;
}
// end of price text-box allow numeric and allow 2 decimal points only
</script>

<input type="Text" id="id" value="" onblur="extractNumber(this,2,true);blockInvalid(this);" onkeyup="extractNumber(this,2,true);" onkeypress="return blockNonNumbers(this, event, true, true);">
— 파티 아민
소스
1

필드의 Income
유효성을 검사해야 할 때 텍스트 상자 필드 이름이 Call this validate method 라고 가정합니다 .

function validate() {
    var currency = document.getElementById("Income").value;
      var pattern = /^[1-9]\d*(?:\.\d{0,2})?$/ ;
    if (pattern.test(currency)) {
        alert("Currency is in valid format");
        return true;
    } 
        alert("Currency is not in valid format!Enter in 00.00 format");
        return false;
}
— 팔라 비 아가 왈
소스
1

@rebisco의 답변 확장. 아래 코드는 텍스트 상자에 숫자와 단일 '.'(마침표) 만 허용합니다.

function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        } else {
            // If the number field already has . then don't allow to enter . again.
            if (evt.target.value.search(/\./) > -1 && charCode == 46) {
                return false;
            }
            return true;
        }
    }
— 산토스 쿠르 데카르
소스
1

더 나은 솔루션

var checkfloats = function(event){
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;

    if(event.target.value.indexOf('.') >=0 && charCode == 46)
        return false;

    return true;
}
— 앨런 페레이라
소스
0

@rebisco 답변에서 시작 :

function count_appearance(mainStr, searchFor) {
    return (mainStr.split(searchFor).length - 1);
}
function isNumberKey(evt)
{
    $return = true;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31
            && (charCode < 48 || charCode > 57))
        $return = false;
    $val = $(evt.originalTarget).val();
    if (charCode == 46) {
        if (count_appearance($val, '.') > 0) {
            $return = false;
        }
        if ($val.length == 0) {
            $return = false;
        }
    }
    return $return;
}

다음 형식 만 허용 : 123123123 [.121213]

여기 데모 데모

— Babesh Florin
소스
0

그것이 당신을 위해 작동하기를 바랍니다.

<input type="text" onkeypress="return chkNumeric(event)" />

<script>
    function chkNumeric(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            if (charCode == 46) { return true; }
            else { return false; }
        }
        return true;
    }
</script>
— 안쿠 르 쿠마르
소스
0

다음 코드가 나를 위해 일했습니다.

다음과 같이 "onkeypress"이벤트가있는 입력 상자

<input type="text" onkeypress="return isNumberKey(this,event);" />

"isNumberKey"기능은 다음과 같습니다.

function isNumberKey(txt, evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode == 46) {
    //Check if the text already contains the . character
    if (txt.value.indexOf('.') === -1) {
        return true;
    } else {
        return false;
    }
  } else {
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
  }
  return true;
}
스 니펫 확장

— Bharat Jain
소스
0

여기에 제공된 모든 답변에 대해 텍스트 상자에서 텍스트의 일부를 선택하고 해당 부분을 덮어 쓰려고하면 작동하지 않는 것을 확인했습니다. 그래서 다음과 같이 기능을 수정했습니다.

    <HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
         var charCode = (evt.which) ? evt.which : event.keyCode;

if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
{
        return false;
}
 if (charCode == 46 && evt.srcElement.value.split('.').length>1 )
    {

        return false;

    } 

 if(evt.srcElement.selectionStart<evt.srcElement.selectionEnd)
    {
          return true;
    }

  if(evt.srcElement.value.split('.').length>1 && evt.srcElement.value.split('.')[1].length==2)
  {

     return false;
  }


    return true;
       }


       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>
— Abhishek Gahlout
소스
0

소수점 이하 소수점 이하 2 자리의 음수도 허용하는 경우 ... 함수를 다음과 같이 수정했습니다.

<input type="text" id="txtSample" onkeypress="return isNumberKey(event,this)"/>



function isNumberKey(evt, element){

        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8 || charCode == 45))
            return false;
        else {
            var len = $(element).val().length;

            // Validation Point
            var index = $(element).val().indexOf('.');
            if ((index > 0 && charCode == 46) || len == 0 && charCode == 46) {
                return false;
            }
            if (index > 0) {
                var CharAfterdot = (len + 1) - index;
                if (CharAfterdot > 3) {
                    return false;
                }
            }

            // Validating Negative sign
            index = $(element).val().indexOf('-');
            if ((index > 0 && charCode == 45) || (len > 0 && charCode == 45)) {
                return false;
            }
        }
        return true;
    }
— 크리스 로제트
소스
0

숫자와 소수점 만 허용하도록 텍스트 상자에 대한 입력을 제한하는 다른 방법은 html 입력 내에서 javascript를 사용하는 것입니다. 이것은 나를 위해 작동합니다.

<input type="text" class="form-control" id="price" name="price" placeholder="Price" 
vrequired onkeyup="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')">

-수락-

9

9.99

--받아들이지 마--

9.99.99

알파벳

— Mpalencia
소스
0 
function isNumberKey(evt)
{
    var charCode = (evt.which) ? evt.which : evt.keyCode;

    if(charCode==8 || charCode==13|| charCode==99|| charCode==118 || charCode==46)
    {    
        return true;  
    }

    if (charCode > 31 && (charCode < 48 || charCode > 57))
    {   
        return false; 
    }
    return true;
}

숫자 만 허용하고 "." 십진수.

— 칼엘
소스
0 
<script type="text/javascript">

    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

        return true;
    }

</script>
@Html.EditorFor(model => model.Orderids, new { id = "Orderids", Onkeypress=isNumberKey(event)})

이것은 잘 작동합니다.

— 배니
소스
0

Pure-Javascript 샘플 라이브 데모를 사용한 최상의 솔루션 : https://jsfiddle.net/manoj2010/ygkpa89o/ 

<script>
function removeCommas(nStr) {
    if (nStr == null || nStr == "")
        return ""; 
    return nStr.toString().replace(/,/g, "");
}

function NumbersOnly(myfield, e, dec,neg)
{        
    if (isNaN(removeCommas(myfield.value)) && myfield.value != "-") {
        return false;
    }
    var allowNegativeNumber = neg || false;
    var key;
    var keychar;

    if (window.event)
        key = window.event.keyCode;
    else if (e)
        key = e.which;
    else
        return true;
    keychar = String.fromCharCode(key);
    var srcEl = e.srcElement ? e.srcElement : e.target;    
    // control keys
    if ((key == null) || (key == 0) || (key == 8) ||
                (key == 9) || (key == 13) || (key == 27))
        return true;

    // numbers
    else if ((("0123456789").indexOf(keychar) > -1))
        return true;

    // decimal point jump
    else if (dec && (keychar == ".")) {
        //myfield.form.elements[dec].focus();
        return srcEl.value.indexOf(".") == -1;        
    }

    //allow negative numbers
    else if (allowNegativeNumber && (keychar == "-")) {    
        return (srcEl.value.length == 0 || srcEl.value == "0.00")
    }
    else
        return false;
}
</script>
<input name="txtDiscountSum" type="text" onKeyPress="return NumbersOnly(this, event,true)" />
스 니펫 확장

— Manoj Prajapat
소스
0

이 문제에 대해 직접 작업하고 있으며 그것이 지금까지 얻은 것입니다. 이것은 어느 정도 작동하지만 새로운 값 확인으로 인해 나중에 마이너스를 추가하는 것은 불가능합니다. 또한 쉼표를 천 단위 구분 기호로 허용하지 않고 소수만 허용합니다.

완벽하지는 않지만 몇 가지 아이디어를 줄 수 있습니다. 

app.directive('isNumber', function () {
            return function (scope, elem, attrs) {
                elem.bind('keypress', function (evt) {
                    var keyCode = (evt.which) ? evt.which : event.keyCode;
                    var testValue = (elem[0].value + String.fromCharCode(keyCode) + "0").replace(/ /g, ""); //check ignores spaces
                    var regex = /^\-?\d+((\.|\,)\d+)?$/;                        
                    var allowedChars = [8,9,13,27,32,37,39,44,45, 46] //control keys and separators             

                   //allows numbers, separators and controll keys and rejects others
                    if ((keyCode > 47 && keyCode < 58) || allowedChars.indexOf(keyCode) >= 0) {             
                        //test the string with regex, decline if doesn't fit
                        if (elem[0].value != "" && !regex.test(testValue)) {
                            event.preventDefault();
                            return false;
                        }
                        return true;
                    }
                    event.preventDefault();
                    return false;
                });
            };
        });

허용 :

11 11 .245 (흐리게 1111.245로 포맷 된 컨트롤러에서)

11,44

-123.123

-1,014

0123 (흐리게 123으로 포맷 됨)

허용하지 않음 :

! @ # $ / *

알파벳

11.11.1

11,11.1

.42

— 제인도
소스
0 
<input type="text" onkeypress="return isNumberKey(event,this)">

<script>
   function isNumberKey(evt, obj) {

            var charCode = (evt.which) ? evt.which : event.keyCode
            var value = obj.value;
            var dotcontains = value.indexOf(".") != -1;
            if (dotcontains)
                if (charCode == 46) return false;
            if (charCode == 46) return true;
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }


</script>
— 카르 틱
소스
0

이 질문은 매우 오래되었지만 여전히 우리는 종종 그러한 요구 사항을 얻습니다. 많은 예제가 있지만 많은 것들이 단순한 구현에 너무 장황 하거나 복잡한 것처럼 보입니다 .

이 참조 https://jsfiddle.net/vibs2006/rn0fvxuk/을 하고 (당신이 할 수있는 경우)을 향상시킬 수 있습니다. IE, Firefox, Chrome 및 Edge Browser에서 작동합니다.

다음은 작업 코드입니다. 

        
        function IsNumeric(e) {
        var IsValidationSuccessful = false;
        console.log(e.target.value);
        document.getElementById("info").innerHTML = "You just typed ''" + e.key + "''";
        //console.log("e.Key Value = "+e.key);
        switch (e.key)
         {         
             case "1":
             case "2":
             case "3":
             case "4":
             case "5":
             case "6":
             case "7":
             case "8":
             case "9":
             case "0":
             case "Backspace":             
                 IsValidationSuccessful = true;
                 break;
                 
						 case "Decimal":  //Numpad Decimal in Edge Browser
             case ".":        //Numpad Decimal in Chrome and Firefox                      
             case "Del": 			// Internet Explorer 11 and less Numpad Decimal 
                 if (e.target.value.indexOf(".") >= 1) //Checking if already Decimal exists
                 {
                     IsValidationSuccessful = false;
                 }
                 else
                 {
                     IsValidationSuccessful = true;
                 }
                 break;

             default:
                 IsValidationSuccessful = false;
         }
         //debugger;
         if(IsValidationSuccessful == false){
         
         document.getElementById("error").style = "display:Block";
         }else{
         document.getElementById("error").style = "display:none";
         }
         
         return IsValidationSuccessful;
        }
Numeric Value: <input type="number" id="text1" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" /><br />
    <span id="error" style="color: Red; display: none">* Input digits (0 - 9) and Decimals Only</span><br />
    <div id="info"></div>
스 니펫 확장

— vibs2006
소스
0

oninput키보드 붙여 넣기, 마우스 붙여 넣기 및 키 입력 문제를 처리하기 위해 이벤트 에서이 문제를 해결하기로 결정했습니다 . 10 진수 또는 정수 유효성 검사를 나타내려면 true 또는 false를 전달합니다.

그것은 기본적으로 3 개의 1 개의 라이너에서 3 개의 단계입니다. 소수점을 자르지 않으려면 세 번째 단계를 설명하십시오. 반올림 조정은 세 번째 단계에서도 수행 할 수 있습니다.

// Example Decimal usage;
// <input type="text"  oninput="ValidateNumber(this, true);" />
// Example Integer usage:
// <input type="text"  oninput="ValidateNumber(this, false);" />
function ValidateNumber(elm, isDecimal) {
    try {

        // For integers, replace everything except for numbers with blanks.
        if (!isDecimal) 
            elm.value = elm.value.replace(/[^0-9]/g, ''); 
        else {
            // 1. For decimals, replace everything except for numbers and periods with blanks.
            // 2. Then we'll remove all leading ocurrences (duplicate) periods
            // 3. Then we'll chop off anything after two decimal places.

            // 1. replace everything except for numbers and periods with blanks.
            elm.value = elm.value.replace(/[^0-9.]/g, '');

            //2. remove all leading ocurrences (duplicate) periods
            elm.value = elm.value.replace(/\.(?=.*\.)/g, '');

            // 3. chop off anything after two decimal places.
            // In comparison to lengh, our index is behind one count, then we add two for our decimal places.
            var decimalIndex = elm.value.indexOf('.');
            if (decimalIndex != -1) { elm.value = elm.value.substr(0, decimalIndex + 3); }
        }
    }
    catch (err) {
        alert("ValidateNumber " + err);
    }
}
— 클램 초다
소스
0 
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

ASCII 값 범위를 지정하여 사용자가 입력 할 값을 제한 할 수 있습니다.
예 : 숫자 값의 경우 48 ~ 57 (0 ~ 9)

— 샤샹 푸 자리
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.