1

Les comento, el asunto es el siguiente;

Estoy trabajando con HTML - jQuery y estoy utilizando un script que remplaza el punto por coma al momento de presionarlo

Script

$('input.number').each(function () {
       $(this).keypress(function(e){
           
           if(e.keyCode == '46' || e.charCode == '46'){
             
             if(document.selection){
                 
                   var range = document.selection.createRange();
                   
                   range.text = ',';
             
             }else if(this.selectionStart || this.selectionStart == '0'){
                   
                   var start = this.selectionStart;
                   var end = this.selectionEnd;
                   
                   $(this).val($(this).val().substring(0, start) + ','
                    + $(this).val().substring(end, $(this).val().length));
                   
                  this.selectionStart = start + 1;
                   this.selectionEnd = start +1;
               }else{
                   
                   $(this).val($(this).val() + ',');             
               }
               return false;
           }
       });
   });

El asunto es, que en input de tipo texto no tengo problema

<input type="text" class="number"/>

Pero cuando quiero utilizar un input de tipo number (para aprovechar que no deje escribir texto)

<input class="number" type="number" lang="es-ar">

En este último caso type='number', al presionar la coma no tengo problemas, el problema surge al presionar el punto del numpad (donde el Script de arriba lo convierte a coma)

Al darse esto, el input se limpia y en la consola recibo lo siguiente

The specified value "3," is not a valid number.

The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

(anonymous) @ jquery?v=rD9yxcIfC-_zwpaJ_9UPbUY1Niam5dFE8OFiugxkBeM1:1

each @ jquery?v=rD9yxcIfC-_zwpaJ_9UPbUY1Niam5dFE8OFiugxkBeM1:1

each @ jquery?v=rD9yxcIfC-_zwpaJ_9UPbUY1Niam5dFE8OFiugxkBeM1:1

val @ jquery?v=rD9yxcIfC-_zwpaJ_9UPbUY1Niam5dFE8OFiugxkBeM1:1

(anonymous) @ VM144:33

dispatch @ jquery?v=rD9yxcIfC-_zwpaJ_9UPbUY1Niam5dFE8OFiugxkBeM1:1

a.handle @ jquery?v=rD9yxcIfC-_zwpaJ_9UPbUY1Niam5dFE8OFiugxkBeM1:1

Saludos y Muchísimas gracias de antemano!

2
  • Una pregunta, ¿el ´input` de tipo number es sólo para recoger valores numéricos, o podrá admitir valores del tipo decimal, o valores flotantes?
    – A. Cedano
    Commented el 26 abr. 2018 a las 15:10
  • @A.Cedano podría recoger valores enteros y decimales, gracias por contestar! Commented el 26 abr. 2018 a las 15:13

3 respuestas 3

1

Desde mi punto de vista, cambiar los . por , es un trabajo complicado, por que no simplemente evitar que escriban los . y en el input ponerles un ejemplo de como es el formato que deben escribir en la caja de texto. Dejo un ejemplo que creo te puede servir

https://jsfiddle.net/we1g2emx/

<input type="text" class="decimalPt" placeholder="Ej. 88,10">

$('.decimalPt').keypress(function(evt) {   evt = (evt) ? evt : window.event;   var charCode = (evt.which) ? evt.which : evt.keyCode;  if (charCode == 8 || charCode == 37) {
    return true;   } else if (charCode == 44 && $(this).val().indexOf(',') != -1) {
    return false;   } else if (charCode > 31 && charCode != 44 && (charCode < 48 || charCode > 57)) {
    return false;   }   return true; });
1
  • Muchas gracias! me pude orientar un poco con lo que enviaste y logré hacerlo, ahora respondo la pregunta con la solución a la que llegue, gracias! Commented el 26 abr. 2018 a las 16:38
1

EDIT

Juan, creo que esta es la función que necesitarías, ya que controla lo siguiente:

  • Que no se puedan digitar más que números y comas en el input
  • Que el primer valor no sea una coma
  • Que no haya más de una coma

Si es violada cualquiera de esas condiciones, la función hace que la entrada por el teclado no sea admitida.

function validateFloatKeyPress(el, evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode;
  console.log(charCode);
  var number = el.value.split(',');
  if (charCode != 44 && charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  //just one dot *comma (thanks ddlab)
  if (number.length > 1 && charCode == 44) {
    return false;
  }
  //get the carat position
  var caratPos = getSelectionStart(el);
  var dotPos = el.value.indexOf(",");
  if (caratPos > dotPos && dotPos > -1 && (number[1].length > 1)) {
    return false;
  }
  return true;
}

//thanks: http://javascript.nwbox.com/cursor_position/
function getSelectionStart(o) {
  if (o.createTextRange) {
    var r = document.selection.createRange().duplicate()
    r.moveEnd('character', o.value.length)
    if (r.text == '') return o.value.length
    return o.value.lastIndexOf(r.text)
  } else return o.selectionStart
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmTest" action="">
  <label for="ibxNumbers">Número:</label>
  <input type="number" name="ibxNumber" id="ibxNumber" placeholder="Escriba el valor" onkeypress="return validateFloatKeyPress(this,event);" />
  <!-- <button type="submit" id="btnSend">Enviar</button> -->
</form>

2
  • Muchas gracias, lamentablemente a eso llegué, pero el problema se genera al momento de querer remplazar el punto por la coma en el evento keydown o keypress, pera que al escribirlo con el teclado numérico, en el input ya aparezca como una coma Commented el 26 abr. 2018 a las 15:41
  • @JuanSalvadorPortugal revisa esta función, creo que es lo que necesitas. Saludos.
    – A. Cedano
    Commented el 26 abr. 2018 a las 17:28
0

Muchas gracias Spank y A.Cedano, con sus respuestas logré llegar a lo que buscaba

$('.number').each(function () {

    $(this).keypress(function (e)
    {
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which != 44 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
            e.preventDefault();
        }
        else if (event.which == 46 || event.which == 44)
        {                
            e.preventDefault();
            if (($(this).val().replace(/[^,]/g, "").length)==0)
            $(this).val($(this).val() + ",");
        }
    });
});

Entonces;

<input type='text' class='number'>

De esa manera sólo permite una coma, y automáticamente al presionar . lo remplaza por una ,

JSFiddle

Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.