Question

我有下面的代码，它应该是一个输入字段，将其值转换为千位分隔符。

我已经实现了我想要的，但我还有一个小问题，我想确保当千位分隔符添加到输出时光标随输入移动，以便它们对齐。

我正在尝试获取概念证明，以便我可以将它应用于离子场，以防万一你想知道我为什么不直接操作输入。

工作原理
我有两个输入字段，输入字段下方的输出字段，输入字段具有透明背景和颜色，以显示输出字段上显示的值。千位分隔符仅根据输入值添加到输出字段，因此您会注意到，在输入几次后，添加了逗号，使输出长于输入，从而使光标不对齐，因为输入的光标是什么显示。 （我希望我的解释有道理）

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/

数千个输入面罩：使插入位置移动

1 个答案: