成千上万的输入掩码:使插入位置移动

Question

i具有以下代码，该代码应该是将其值转换为具有一千个分隔符的输入字段。

我已经实现了我想要的，但是我仍然有一个小问题，我想确保在将千分离器添加到输出中以使它们对齐时，光标移动使用输入。

。

我试图获得概念证明，以便我可以将其应用于离子的领域，以防万一您想知道为什么我不直接操纵输入。

它如何工作
我有两个输入字段，即输入字段下方的输出字段，输入字段具有透明的背景和颜色，以显示在输出字段上显示的值。仅根据输入的值添加千分离器，因此您会注意到，在输入夫妇后，添加了逗号后，添加了逗号，使输出比输入更长，因此由于输入的光标，因此使光标失调是显示的内容。(我希望我的解释有意义(

function addThousandsSeparator(input) {
    var output = input
    if (parseFloat(input)) {
        input = new String(input); // so you can perform string operations
        var parts = input.split("."); // remove the decimal part
        parts[0] = parts[0].split("").reverse().join("").replace(/(d{3})(?!$)/g, "$1,").split("").reverse().join("");
        output = parts.join(".");
    }
    return output;
}
$(document).ready(function () {
  $('.input').on('input', function () {
    let input = $(this).val();
    
    let output = addThousandsSeparator(input)
    $('.output').val(output)
    console.log(output)
  })
})

.container {
  position: relative;
}
.container input {
  display: block;
  width: 100%;
}
.container .input {
  background: transparent;
  z-index: 10;
  position: absolute;
  color: transparent;
  caret-color: #000;
}
.container .output {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input class="output" type="text"/>
  <input class="input" type="tel"/>
</div>

Answer 1

function addThousandsSeparator(input) {
        var output = input
        if (parseFloat(input)) {
            input = new String(input); // so you can perform string operations
            input = input.replace(/,/g,"")
            var parts = input.split("."); // remove the decimal part
            parts[0] = parts[0].split("").reverse().join("").replace(/(d{3})(?!$)/g, "$1,").split("").reverse().join("");
            output = parts.join(".");
        }
        return output;
    }
    $(document).ready(function () {
      $('.input').on('input', function () {
        let input = $(this).val();
        let output = addThousandsSeparator(input)
        $('.input').val(output)
        console.log(output)
      })
    })

.container {
      position: relative;
    }
    .container input {
      display: block;
      width: 100%;
    }
    .container .input {
      background: transparent;
      z-index: 10;
      position: absolute;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
      <input class="input" type="tel" id="someinput"/>
    </div>

您可以按照以下方式执行上述代码

    function addThousandsSeparator(input) {
        var output = input
        if (parseFloat(input)) {
            input = new String(input); // so you can perform string operations
            input = input.replace(/,/g,"")
            var parts = input.split("."); // remove the decimal part
            parts[0] = parts[0].split("").reverse().join("").replace(/(d{3})(?!$)/g, "$1,").split("").reverse().join("");
            output = parts.join(".");
        }
        return output;
    }
    $(document).ready(function () {
      $('.input').on('input', function () {
        let input = $(this).val();
        let output = addThousandsSeparator(input)
        $('.input').val(output)
        console.log(output)
      })
    })

    <div class="container">
      <input class="input" type="tel" id="someinput"/>
    </div>
   .container {
      position: relative;
    }
    .container input {
      display: block;
      width: 100%;
    }
    .container .input {
      background: transparent;
      z-index: 10;
      position: absolute;
    }

对于POC，您可以在我的小提琴演示上查看https://jsfiddle.net/sakshigargit15/1n0ncu3j/6/