Restringir la entrada al cuadro de texto: permitir solo números y punto decimal

107

¿Cómo puedo restringir la entrada a un cuadro de texto para que acepte solo números y el punto decimal?

javascript html TinTin
fuente

11

Su pregunta original fue genial, Amar ... !!! ¿Por qué cambiarlo ..? ;)

SpikETidE

14

¿Por qué los votos negativos? El chico es nuevo aquí, ayúdalo a mejorar sus misiones, por favor.

lexu

Ayyappan.Anbalagan, agregue algunos ejemplos a la publicación :) ¿Son todas estas cadenas correctas para usted? 192192.168 192.168.0.1

lak-b

Lo tengo hombre gracias ... solo formato 22.22 también debería permitir solo 5 caracteres en el txtbox ...

TinTin

¿Cuál es el problema con isNaN(this.textbox.value)?

Sam007

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>

Expandir fragmento

¡Esto realmente funciona!

rebisco
fuente

1

¿Por qué se necesita && charCode> 31?

contactmatt

2

El carácter 31 es el código del separador de unidades. Casi todos los números y el texto están entre 32 y más. El código dice que si el código de carácter ingresado no es el decimal Y es mayor que 31 (separador de unidades) pero menor que 48 (número cero) o mayor que 57 (número nueve), no lo acepte.

Paul Williams

9

if (charCode == 46 && evt.srcElement.value.split ('.'). length> 1) {return false; } Privent múltiples '.'... :)

Anish Karunakaran

10

Incluya las teclas numéricas del teclado y los puntos con:&& charCode != 190 && charCode != 110 && (charCode > 105 || charCode < 96)

mga

1

está aceptando más de uno ”. [punto] ', lo cual es incorrecto, supongo.

Akshay Chawla

26

form.onsubmit = function(){
    return textarea.value.match(/^\d+(\.\d+)?$/);
}

¿Es esto lo que estás buscando?

Espero que ayude.

EDITAR: Edité mi ejemplo anterior para que solo pueda haber un punto, precedido por al menos un dígito y seguido por al menos un dígito.

tau
fuente

1

Creo que esto también validará '99 .23.65.86 '.... Pero supongo que la pregunta era sobre la validación de' 56987.32 'con un solo punto .....

SpikETidE

Veo que el cartel ha editado desde entonces su pregunta original. ¡gracias por la actualización!

tau

1

Será mejor que use /^\d+([\.,]\d+)?$/ para admitir números internacionales (donde se usa una coma en lugar de un punto)

FDIM

26

La solución aceptada no está completa, ya que puede ingresar varios '.', Por ejemplo 24 .... 22..22. con algunas pequeñas modificaciones, funcionará según lo previsto:

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

Expandir fragmento

Hassan Mokdad
fuente

Usé su respuesta pero modifiqué esto onkeypress = "return isNumberKey (this, event);"

Bilbo Baggins

sí, creo que es opcional escribir pasar el evento, ya que funciona con ambos casos, gracias

Hassan Mokdad

nos ahorró algunas

pulsaciones de

El único problema con este es que puedes copiar y pegar texto. Agregar al elemento de entrada ondrop="return false;" onpaste="return false;" oncontextmenu="return false;"parece ser suficiente

clamchoda

Es un mal servicio para todos los usuarios evitar que utilicen la función de arrastrar y soltar o copiar y pegar.

Hubert Grzeskowiak

19

Aquí hay una solución más que permite números decimales y también limita los dígitos después del decimal a 2 lugares decimales.

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

Expandir fragmento

Kurenai Kunai
fuente

Casi perfecto .. la última condición de su iffalta una "C" en mayúscula.

DNKROZ

Hermosa solución !!

Michael Murray

Hermoso. Funciona perfectamente para mi.

Noor Ahmed

Tenga en cuenta que esta solución permite varios puntos ( .), guiones ( -) y la letra ecuando el texto se pega o suelta en el campo. El elemento HTML también mostrará dos flechas para incrementar y disminuir el número de forma predeterminada en Chrome. El botón de disminución permite que el número caiga por debajo de cero.

Hubert Grzeskowiak

12

Todas las soluciones presentadas aquí utilizan eventos de clave única. Esto es muy propenso a errores ya que la entrada también se puede dar usando copiar y pegar o arrastrar y soltar. Además, algunas de las soluciones restringen el uso de claves que no son caracteres como ctrl+c, Pos1etc.

Sugiero que, en lugar de comprobar cada pulsación de tecla, compruebe si el resultado es válido con respecto a sus expectativas.

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>

Expandir fragmento

El oninputevento se activa justo después de que se cambia algo en el área de texto y antes de ser renderizado.

Puede extender la expresión regular a cualquier formato de número que desee aceptar. Esto es mucho más fácil de mantener y ampliar que comprobar si se pulsa una sola tecla.

Hubert Grzeskowiak
fuente

¡Esta es la solución más elegante!

jkd

4

¿Estás buscando algo así?

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

lak-b
fuente

4

Solo necesita aplicar este método en Jquery y puede validar su cuadro de texto para aceptar el número solo con un decimal.

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

Vea la demostración funcional aquí

Jitender Kumar
fuente

2

Para cualquiera que tropiece aquí como lo hice yo, aquí hay una versión de jQuery 1.10.2 que escribí y que funciona muy bien para mí, aunque requiere muchos recursos:

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

MonoZeus
fuente

2

Una pequeña corrección a la brillante respuesta de @ rebisco para validar el decimal perfectamente.

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

Anish Karunakaran
fuente

esto es muy bueno. Sin embargo, me gustaría limitarlo a 2 puntos decimales, ¿de todos modos para hacer eso?

nodeffect

2

Si lo desea para valores flotantes,

Aquí está la función que estoy usando

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

Expandir fragmento

Rahul
fuente

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

Kennebec
fuente

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

Jonas Reycian
fuente

1

aquí hay un script que te ayudará:

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

Fathi Amin
fuente

1

Suponga que el nombre del campo de su cuadro de texto es Income
Llamar a este método de validación cuando necesite validar su campo:

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

Pallavi Agarwal
fuente

1

Extendiendo la respuesta de @ rebisco. este código a continuación permitirá solo números y '.' (punto) en el cuadro de texto.

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

Santosh Kurdekar
fuente

1

Mejor solucion

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

Allan Pereira
fuente

0

A partir de la respuesta de @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;
}

Solo admite este formato: 123123123 [.121213]

Demo aquí demo

Babesh Florin
fuente

0

Espero que funcione para ti.

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

Ankur Kumar
fuente

0

El siguiente código funcionó para mí

El cuadro de entrada con el evento "onkeypress" de la siguiente manera

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

La función "isNumberKey" es la siguiente

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

Expandir fragmento

Bharat Jain
fuente

0

Observé que para todas las respuestas proporcionadas aquí, las cosas no funcionan si seleccionamos una parte del texto en el cuadro de texto e intentamos sobrescribir esa parte. Así que modifiqué la función que es la siguiente:

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

0

Para números decimales y también permitiendo números negativos con 2 lugares para decimales después del punto ... Modifiqué la función a:

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

Chris Rosete
fuente

0

Una forma alternativa de restringir la entrada a un cuadro de texto para que acepte solo números y el punto decimal es usar javascript dentro de la entrada html. Esto funciona para mi:

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

--Acepta--

9

9,99

--No acepto--

9,99,99

A B C

mpalencia
fuente

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

Permitirá sólo números y le permitirá poner "." para decimal.

Kal-El
fuente

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

Esto funciona bien.

banny
fuente

0

La mejor solución que funciona con la demostración en vivo de 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)" />

Expandir fragmento

Manoj Prajapat
fuente

0

Trabajando en el tema yo mismo, y eso es lo que tengo hasta ahora. Esto funciona más o menos, pero es imposible agregar menos después debido a la nueva verificación de valor. Tampoco permite la coma como separador de miles, solo decimal.

No es perfecto, pero podría dar algunas ideas.

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

Permite:

11 11 .245 (en controlador formateado en desenfoque a 1111.245)

11,44

-123.123

-1 014

0123 (formateado en desenfoque a 123)

no permite:

PS

a B C

11.11.1

11,11.1

.42

fulano de tal
fuente

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>

Karthik
fuente

0

Sé que esta pregunta es muy antigua, pero a menudo recibimos tales requisitos. Hay muchos ejemplos, sin embargo, muchos parecen ser demasiado detallados o complejos para una simple implementación.

Vea esto https://jsfiddle.net/vibs2006/rn0fvxuk/ y mejórelo (si puede). Funciona en IE, Firefox, Chrome y Edge Browser.

Aquí está el código de trabajo.

        
        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>

Expandir fragmento

vibs2006
fuente

0

Elegí abordar esto en el oninputevento para manejar el problema de pegar el teclado, pegar el mouse y presionar las teclas. Pase verdadero o falso para indicar validación decimal o entera.

Básicamente son tres pasos en tres líneas. Si no quiere truncar los decimales, comente el tercer paso. También se pueden realizar ajustes para el redondeo en el tercer paso.

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

clamchoda
fuente

0

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

Puede restringir los valores que ingrese el usuario especificando el rango de valores ASCII.
Ejemplo : 48 a 57 para valores numéricos (0 a 9)

SHASHANK PUJARI
fuente

Restringir la entrada al cuadro de texto: permitir solo números y punto decimal

Respuestas: