Problem replacing point with comma keyPress

Navigation
1

I comment, the matter is as follows;

I'm working with HTML - jQuery and I'm using a script that replaces the dot by comma when I press it

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

The issue is, that in text type input I have no problem 

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

But when I want to use an input of type number (to take advantage of not writing text) 

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

In this last case type = ' number ', when pressing the comma I have no problems, the problem arises when pressing the point of the numpad (where the Script above converts it to a comma)

When this occurs, the input is cleaned and in the console I receive the following

  

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

Greetings and Thank you very much in advance!

    
asked by Juan Salvador Portugal 26.04.2018 в 17:01
source

3 answers

0

Thank you very much Spank and A.Cedano , with your answers I managed to get what I was looking for 

$('.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() + ",");
        }
    });
});

Then; 

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

That way it only allows a comma, and automatically when you press . it replaces it with a ,

JSFiddle

Greetings!

    
answered by 26.04.2018 / 18:44
source
1

From my point of view, changing the . to , is a complicated job, because it does not simply prevent them from writing them. and in the input to give them an example of how is the format that they should write in the text box. I leave an example that I think you can use

link 

<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; });
    
answered by 26.04.2018 в 18:35
1

EDIT

Juan, I think this is the function you would need, since it controls the following:

  • That you can not type more than numbers and commas in the input
  • That the first value is not a comma
  • That there is not more than one comma

If any of these conditions is violated, the function makes the entry by the keyboard not admitted. 

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>
    
answered by 26.04.2018 в 17:28
Python Groupby pandas sums of strings and floating How to add an event to an element created with JavaScript