Javascript Vue.js KeyUpEventHandler:使用逗号-千分隔符格式化输入的数字后的插入符号位置

我想用逗号千分隔符（1000000->1000000）格式化输入的数字。为此，我想使用KeyUpEventHandler:@keyup.stop=“KeyUpEventHandler”。问题是-我无法移动文本末尾插入符号的位置。 我发现这是可能的，但我从来没有用过它。你能帮我修改一下密码吗。谢谢

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

  }
},

---

可能的副本非常感谢您的评论。棒极了的链接！但这个问题不仅仅是关于逗号作为数千个分隔符的问题。我关于文本后插入符号位置的问题我不太明白，为什么不使用vues

data

object并使用插值来显示变异的数字？因为这是contenteditable HTML元素，所以我不使用数据

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

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
    }

  };

}