Разрешить только цифры и точки в скрипте

Question

Я использую этот 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 (это) возвращает событие объекта требуемую ошибку в этой функции на этом месте

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

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

Answer 1

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

onkeypress="return fun_AllowOnlyAmountAndDot(this);"

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

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

Answer 2

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

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

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

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

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

Вы можете заменить свой код с этим:

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

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

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

Для более чтении с использованием регулярных выражений с JavaScript, проверить это:

• http://www.regular-expressions.info/javascript.html

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

• http://www.regular-expressions.info/javascriptexample.html

---

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

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

• * означает «» или «».

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

• обратной косой используется как экранирующий символ за период, потому что период обычно означает "любого характера."

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

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

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

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

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

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

Надеется, что это помогает.

Answer 4

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

Answer 5

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

Я также применяю форматирование валюты при размытии, где десятичная часть округляется на 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's 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> 

Answer 6

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

Answer 7

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

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

Answer 8

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

 
     return true; 
 
\t }catch(w){ 
 
\t \t alert(w); 
 
\t } 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <INPUT id="txtChar" onkeypress="return isNumberKey(event,this.id)" type="text" name="txtChar"> 
 
    </body> 
 
</html>

Answer 9

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

Answer 10

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

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

Answer 11

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

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>

Answer 12

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

Click here for example..

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

 
\t function addListener(list){ 
 
\t \t for(var i=0;i<list.length;i++){ 
 
    \t \t list[i].addEventListener('keypress',checking); 
 
    \t } 
 
\t } 
 
\t var classList = document.getElementsByClassName('number'); 
 
\t 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>

Answer 13

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

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