Permitir solo números y puntos en la secuencia de comandos

Question

Estoy utilizando este javascript para restringir a los usuarios a escribir solo los números y solo un punto como separador decimal.

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

Pero el onkeypress (esto) Event objeto de error requerida en esa función en este lugar

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

¿Cuál es mi error aquí?

Answer 1

En lugar de utilizar esto:

onkeypress="return fun_AllowOnlyAmountAndDot(this);"

Debe utilizar este:

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

Answer 2

Este es un excelente lugar para usar expresiones regulares.

Al usar una expresión regular, , puede reemplazar todo ese código con solo una línea.

Puede utilizar el expresiones regulares siguiente para validar sus requisitos:

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

En otras palabras: cero o más caracteres numéricos, seguido de cero o un período (s), seguido de cero o más caracteres numéricos.

Puede reemplazar el código con esto:

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

que el código puede reemplazar toda la función!

Tenga en cuenta que tiene que escapar del período con una barra diagonal inversa (de lo contrario, significa 'cualquier carácter').

Para más lectura sobre el uso de expresiones regulares con javascript, mira esto:

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

También puede probar la expresión regular anterior aquí:

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

---

Explicación de la expresión regular utilizada anteriormente:

• Los corchetes significan "cualquier carácter dentro de estos soportes." Puede usar un guion (como el de arriba) para indicar un rango de caracteres.

• El * significa "cero o más de la expresión anterior."

• [0-9]* significa "cero o más números"

• La barra invertida se utiliza como un carácter de escape para el período, debido periodo generalmente significa "cualquier carácter ."

• Los ? significa" cero o uno del carácter anterior ".

• El ^ representa el principio de una cadena.

• El $ representa el final de una cadena.

• Al iniciar la expresión regular con ^ y al terminar con $ se asegura que el entero cadena se adhiere al patrón de expresión regex.

Hope this helps!

Answer 3

Use Jquery en su lugar. Agregue una clase decimal a su cuadro de texto:

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

Utilice este código en su JS. Comprueba decimales múltiples y también restringe a los usuarios a escribir solo números.

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

Marque esta violín: http://jsfiddle.net/2YW8g/

espero que ayude.

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

Esto funciona mejor para mí.

También aplico un formateador de moneda en desenfoque donde la parte decimal se redondea a 2 dígitos por si acaso después de validar con parseFloat.

Las funciones que obtienen y configuran la posición del cursor son del blog de Vishal Monpara. También hago algunas cosas bonitas sobre el enfoque con esas funciones. Puedes eliminar fácilmente 2 bloques de código donde 2 decimales son forzados si quieres y deshacerte de las funciones 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; 
} 

se debe utilizar esta función y escribir las propiedades de este elemento;

HTML Code:

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

Answer 7

Esta función será evitar la entrada de otra cosa que no sea un número y un solo punto.

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

creo que esta solución simple puede ser.

Answer 11

probar este Código

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

probar esto por múltiples campos campos de texto (usando selector de clase):

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

Apenas añada el siguiente código en su texto de entrada:

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