Vue.js KeyUpEventHandler: Caret position after formatting the entered numbers with comma - thousand delimiter

Question

I would like to format entered numbers with comma - thousand delimiter like that (1000000 -> 1000,000). For this purpose I want to use KeyUpEventHandler: @keyup.stop=“KeyUpEventHandler”. The issue is that - I cannot move the position of Caret at the end of a text. I found that it’s possible to do with Javascript Range but I never used it before. Could you help me to fix my code please. Thanks!

KeyUpEventHandler: function(event) {
  var self = this;
  var evt = event || window.event;

  var charCode = event.which || event.keyCode;  
  // skip for arrow keys:
  if(charCode >= 37 && charCode <= 40) return;

  var value = event.target.innerHTML;
  var len = value.length;
  console.log("value: " + value +" len: " + len);
  var commaFormatted = value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");

  if (typeof window.getSelection != "undefined") {
    var el = window.getSelection();
    console.log(el);
    if (el.getRangeAt && el.rangeCount) {
      var range = el.getRangeAt(0);
      var lastChild = el.lastChild; //null
      //var endOffset = el.childNodes.length;
      //el.innerHTML = commaFormatted; //not visible for Vue
      var spanEl = self.$refs[self.refName]; 
      spanEl.innerHTML = commaFormatted;
      //var range = spanEl.getRangeAt(0);
      //range.setEnd(spanEl, len); 
      range.setEndAfter(lastChild); //.setEndAfter**strong text**(spanEl, endOffset);
    }

  }
},

Sorry please for misunderstanding. There is no issue with formatting numbers:

formatNumber: function(num) {
  var parts = num.split('.');
  var part1 = parts[0];
  var part2 = parts.length > 1 ? '.' + parts[1].substring(0, 2) : ''; // always two decimal digits
  //BAD: https://blog.abelotech.com/posts/number-currency-formatting-javascript/ <-- BAD
  //BAD: return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,'); //BAD
  return part1.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",") + part2;    
},

The issue is only with Cursor (Caret) Position at elements that are editable by the user:
css -webkit-user-modify: read-write;

Thank you all! I found a working solution:

formatNumber: function(num) {
  var parts = num.split('.');
  var part1 = parts[0];
  var part2 = parts.length > 1 ? '.' + parts[1].substring(0, 2) : ''; // always two decimal digits
  return part1.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",") + part2;    
},
KeyUpEventHandler: function(event) {
  var self = this;
  var evt = event || window.event;

  var charCode = evt.which || evt.keyCode;  
  // skip for arrow keys - we want to allow navigation around textbox using arrow keys
  if(charCode >= 37 && charCode <= 40) return;

  if (typeof window.getSelection != "undefined") {
    var selection = window.getSelection();
    var value = event.target.innerHTML;
    var len = value.length;

    var commaFormatted = self.formatNumber(value);
    var el = self.$refs[self.refName]; 
    el.innerHTML = commaFormatted;

    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
      range = document.createRange();
      range.selectNodeContents(el);
      range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
      selection.removeAllRanges();//remove any selections already made
      selection.addRange(range); 
    } else if(document.selection)//IE 8 and lower
    {
      range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
      range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
      range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
      range.select();//Select the range (make it the visible selection
    }

  };

}