Разрешить только числа и точки в script

Я использую этот javascript для ограничения пользователей на ввод только чисел и только одну точку в качестве разделителя с разделителями.

<script type="text/javascript">
 function fun_AllowOnlyAmountAndDot(txt)
        {
            if(event.keyCode > 47 && event.keyCode < 58 || event.keyCode == 46)
            {
               var txtbx=document.getElementById(txt);
               var amount = document.getElementById(txt).value;
               var present=0;
               var count=0;

               if(amount.indexOf(".",present)||amount.indexOf(".",present+1));
               {
              // alert('0');
               }

              /*if(amount.length==2)
              {
                if(event.keyCode != 46)
                return false;
              }*/
               do
               {
               present=amount.indexOf(".",present);
               if(present!=-1)
                {
                 count++;
                 present++;
                 }
               }
               while(present!=-1);
               if(present==-1 && amount.length==0 && event.keyCode == 46)
               {
                    event.keyCode=0;
                    //alert("Wrong position of decimal point not  allowed !!");
                    return false;
               }

               if(count>=1 && event.keyCode == 46)
               {

                    event.keyCode=0;
                    //alert("Only one decimal point is allowed !!");
                    return false;
               }
               if(count==1)
               {
                var lastdigits=amount.substring(amount.indexOf(".")+1,amount.length);
                if(lastdigits.length>=2)
                            {
                              //alert("Two decimal places only allowed");
                              event.keyCode=0;
                              return false;
                              }
               }
                    return true;
            }
            else
            {
                    event.keyCode=0;
                    //alert("Only Numbers with dot allowed !!");
                    return false;
            }

        }

    </script>

<td align="right">
<asp:TextBox ID="txtQ1gTarget" runat="server" Width="30px" CssClass="txtbx" MaxLength="6" onkeypress="return fun_AllowOnlyAmountAndDot(this);"></asp:TextBox>
</td>

Но событие onkeypress (this) возвращает требуемую объектную ошибку в этой функции в этом месте

var amount = document.getElementById(txt).value;

Какая моя ошибка здесь?

Ответы

Ответ 1

Вместо этого:

onkeypress="return fun_AllowOnlyAmountAndDot(this);"

Вы должны использовать это:

onkeypress="return fun_AllowOnlyAmountAndDot(this.id);"

Ответ 2

Это отличное место для использования регулярных выражений.

Используя регулярное выражение, , вы можете заменить весь этот код только одной строкой.

Вы можете использовать следующее регулярное выражение для проверки ваших требований:

[0-9]*\.?[0-9]*

Другими словами: ноль или несколько числовых символов, за которыми следуют ноль или один период (ы), за которым следуют ноль или более числовых символов.

Вы можете заменить свой код следующим:

function validate(s) {
    var rgx = /^[0-9]*\.?[0-9]*$/;
    return s.match(rgx);
}

Этот код может заменить всю вашу функцию!

Обратите внимание, что вам нужно избежать периода с помощью обратного слэша (в противном случае это означает "любой символ" ).

Чтобы узнать больше об использовании регулярных выражений с помощью javascript, выполните следующие действия:

Здесь вы также можете проверить приведенное выше выражение:


Объяснение регулярного выражения, используемого выше:

  • Скобки означают "любой символ внутри этих скобок". Вы можете использовать дефис (например, выше), чтобы указать диапазон символов.

  • * означает "ноль или более предыдущего выражения".

  • [0-9]* означает "ноль или больше чисел"

  • Обратная косая черта используется как escape-символ для периода, потому что период обычно означает "любой символ".

  • ? означает "ноль или один из предыдущего символа".

  • ^ представляет начало строки.

  • $ представляет конец строки.

  • Запуск регулярного выражения с ^ и завершение его $ гарантирует, что вся строка будет придерживаться шаблона регулярного выражения.

Надеюсь, это поможет!

Ответ 3

Вместо этого используйте JQuery. Добавьте десятичный класс в текстовое поле:

<input type="text" class="decimal" value="" />

Используйте этот код в своем JS. Он проверяет наличие нескольких десятичных знаков, а также ограничивает пользователей типом только чисел.

$('.decimal').keyup(function(){
    var val = $(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) 
             val =val.replace(/\.+$/,"");
    }
    $(this).val(val); 
});​

Проверьте эту скрипту: http://jsfiddle.net/2YW8g/

Надеюсь, что это поможет.

Ответ 4

function isNumberKey(evt,id)
{
	try{
        var charCode = (evt.which) ? evt.which : event.keyCode;
  
        if(charCode==46){
            var txt=document.getElementById(id).value;
            if(!(txt.indexOf(".") > -1)){
	
                return true;
            }
        }
        if (charCode > 31 && (charCode < 48 || charCode > 57) )
            return false;

        return true;
	}catch(w){
		alert(w);
	}
}
<html>
  <head>
  </head>
  <body>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event,this.id)" type="text" name="txtChar">
  </body>
</html>

Ответ 5

Просто добавьте код в свой текст:

onkeypress='return event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)'

Ответ 6

<input type="text" class="decimal" value="" />
$('.decimal').keypress(function(evt){
    return (/^[0-9]*\.?[0-9]*$/).test($(this).val()+evt.key);
});

Я думаю, что это простое решение может быть.

Ответ 7

Это работает лучше всего для меня.

Я также применяю форматировщик валют при размытии, где десятичная часть округляется на 2 цифры на всякий случай после проверки с помощью parseFloat.

Функции, которые получают и устанавливают позицию курсора, принадлежат блогу Vishal Monpara. Я также хорошо разбираюсь в этих функциях. Вы можете легко удалить 2 блока кода, где 2 десятичных значения принудительно, если вы хотите, и избавиться от функций set/get caret.

<html>
<body>
<input type="text" size="30" maxlength="30" onkeypress="return numericValidation(this,event);" />
<script language="JavaScript">
    function numericValidation(obj,evt) {
        var e = event || evt; // for trans-browser compatibility

        var charCode = e.which || e.keyCode;        

        if (charCode == 46) { //one dot
            if (obj.value.indexOf(".") > -1)
                return false;
            else {
                //---if the dot is positioned in the middle give the user a surprise, remember: just 2 decimals allowed
                var idx = doGetCaretPosition(obj);
                var part1 = obj.value.substr(0,idx),
                    part2 = obj.value.substring(idx);

                if (part2.length > 2) {
                    obj.value = part1 + "." + part2.substr(0,2);
                    setCaretPosition(obj, idx + 1);
                    return false;
                }//---

                //allow one dot if not cheating
                return true;
            }
        }
        else if (charCode > 31 && (charCode < 48 || charCode > 57)) { //just numbers
            return false;
        }

        //---just 2 decimals stubborn!
        var arr = obj.value.split(".") , pos = doGetCaretPosition(obj);

        if (arr.length == 2 && pos > arr[0].length && arr[1].length == 2)                               
            return false;
        //---

        //ok it a number
        return true;
    }

    function doGetCaretPosition (ctrl) {
        var CaretPos = 0;   // IE Support
        if (document.selection) {
        ctrl.focus ();
            var Sel = document.selection.createRange ();
            Sel.moveStart ('character', -ctrl.value.length);
            CaretPos = Sel.text.length;
        }
        // Firefox support
        else if (ctrl.selectionStart || ctrl.selectionStart == '0')
            CaretPos = ctrl.selectionStart;
        return (CaretPos);
    }

    function setCaretPosition(ctrl, pos){
        if(ctrl.setSelectionRange)
        {
            ctrl.focus();
            ctrl.setSelectionRange(pos,pos);
        }
        else if (ctrl.createTextRange) {
            var range = ctrl.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    }
</script>
</body>
</html>

Ответ 8

<script type="text/javascript">
    function numericValidation(txtvalue) {
        var e = event || evt; // for trans-browser compatibility
        var charCode = e.which || e.keyCode;
        if (!(document.getElementById(txtvalue.id).value))
         {
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
        else {
               var val = document.getElementById(txtvalue.id).value;
            if(charCode==46 || (charCode > 31 && (charCode > 47 && charCode < 58)) )
             {
                var points = 0;            
                points = val.indexOf(".", points);                    
                if (points >= 1 && charCode == 46)
                {      
                   return false;
                }                 
                if (points == 1) 
                {
                    var lastdigits = val.substring(val.indexOf(".") + 1, val.length);
                    if (lastdigits.length >= 2)
                    {
                        alert("Two decimal places only allowed");
                        return false;
                    }
                }
                return true;
            }
            else {
                alert("Only Numarics allowed");
                return false;
            }
        }
    }

</script>
<form id="form1" runat="server">
<div>
  <asp:TextBox ID="txtHDLLevel" MaxLength="6" runat="server" Width="33px" onkeypress="return numericValidation(this);"  />
</div>
</form>

Ответ 9

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 46 || charCode > 57)) {
        return false;
    }
    return true;
}

вы должны использовать эту функцию и написать свойства этого элемента;

Код HTML:

<input id="deneme" data-mini="true" onKeyPress="return isNumber(event)" type="text"/>`

Ответ 10

попробуйте этот код

var check = function(evt){

var data = document.getElementById('num').value;
if((evt.charCode>= 48 && evt.charCode <= 57) || evt.charCode== 46 ||evt.charCode == 0){
if(data.indexOf('.') > -1){
 if(evt.charCode== 46)
  evt.preventDefault();
}
}else
evt.preventDefault();
};

document.getElementById('num').addEventListener('keypress',check);
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text" id="num" value="" />



</body>
</html>

Ответ 11

Попробуйте это для нескольких текстовых полей (с помощью селектора классов):

Нажмите здесь, например..

var checking = function(event){
	var data = this.value;
	if((event.charCode>= 48 && event.charCode <= 57) || event.charCode== 46 ||event.charCode == 0){
		if(data.indexOf('.') > -1){
 			if(event.charCode== 46)
  				event.preventDefault();
		}
	}else
		event.preventDefault();
	};

	function addListener(list){
		for(var i=0;i<list.length;i++){
    		list[i].addEventListener('keypress',checking);
    	}
	}
	var classList = document.getElementsByClassName('number');
	addListener(classList);
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
</body>
</html>

Ответ 12

Эта функция предотвратит ввод чего-либо, кроме цифр и одной точки.

function validateQty(el, evt) {
   var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode != 45 && charCode != 8 && (charCode != 46) && (charCode < 48 || charCode > 57))
        return false;
    if (charCode == 46) {
        if ((el.value) && (el.value.indexOf('.') >= 0))
            return false;
        else
            return true;
    }
    return true;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = evt.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
};
<input type="text" onkeypress='return validateQty(this,event);'>

Ответ 13

Вы можете использовать это

Javascript

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

Usage

Usage
 <input onkeypress="return isNumber(event)" class="form-control">

Ответ 14

 <script type="text/Javascript">
        function checkDecimal(inputVal) {
            var ex = /^[0-9]+\.?[0-9]*$/;
            if (ex.test(inputVal.value) == false) {
                inputVal.value = inputVal.value.substring(0, inputVal.value.length - 1);
            }
        }
</script>

Ответ 15

 <input type="text" class="form-control" id="odometer_reading" name="odometer_reading"  placeholder="Odometer Reading" onblur="odometer_reading1();" onkeypress='validate(event)' required="" />
<script>
                function validate(evt) {
                  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();
                  }
                }
            </script>