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
    el 26 abr. 2018 a las 15:10
  • @A.Cedano podría recoger valores enteros y decimales, gracias por contestar! 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! 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 el 26 abr. 2018 a las 15:41
  • @JuanSalvadorPortugal revisa esta función, creo que es lo que necesitas. Saludos.
    – A. Cedano
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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