web前端实现一个输入框,整数部分自动添加千分位符合，并支持两位小数，如果有小数或者在中间输入，在哪个位置输入，转换后光标仍然在该位置

这个需求可以通过监听输入框的输入事件来实现，具体步骤如下：

1. 给输入框绑定一个输入事件，每次输入时触发该事件。

2. 在事件处理函数中，获取输入框中的文本内容，判断是否为合法的数字格式。

3. 如果是合法的数字格式，将整数部分添加千分位符。

4. 如果有小数部分，保留两位小数。

5. 将处理后的文本内容重新赋值给输入框。

6. 获取当前光标位置，并根据处理后的文本内容计算出新的光标位置。

7. 将光标位置设置为新的位置。

下面是一个简单的实现示例：

<input type="text" id="input">

<script>
  const input = document.getElementById('input');
  let oldValue = '';

  input.addEventListener('input', function(e) {
    const value = e.target.value;

    // 判断是否为合法的数字格式
    if (/^\d*(\.\d{0,2})?$/.test(value)) {
      // 添加千分位符
      const parts = value.split('.');
      parts[0] = parts[0].replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,');
      // 保留两位小数
      if (parts.length > 1) {
        parts[1] = parts[1].substring(0, 2);
      }
      const newValue = parts.join('.');

      // 将处理后的文本内容重新赋值给输入框
      e.target.value = newValue;

      // 计算新的光标位置
      let newCursorPos;
      if (value.length > oldValue.length) {
        // 在末尾输入
        newCursorPos = e.target.selectionEnd;
      } else if (value.length < oldValue.length) {
        // 在中间删除
        newCursorPos = e.target.selectionEnd - (oldValue.length - value.length);
      } else {
        // 在中间输入
        const cursorPos = e.target.selectionEnd;
        const diff = newValue.length - value.length;
        newCursorPos = cursorPos + diff;
      }
      // 将光标位置设置为新的位置
      e.target.setSelectionRange(newCursorPos, newCursorPos);
      oldValue = newValue;
    } else {
      // 不是合法的数字格式，恢复原来的文本内容
      e.target.value = oldValue;
    }
  });
</script>

在这个示例中，我们将输入框的输入事件处理函数绑定到了`input`事件上，每次输入时都会触发该事件处理函数。在处理函数中，我们首先获取输入框中的文本内容，然后判断是否为合法的数字格式。如果是合法的数字格式，我们就将整数部分添加千分位符，保留两位小数，并重新赋值给输入框。接着，我们根据输入前后的文本长度差来计算新的光标位置，并将光标位置设置为新的位置。最后，我们将处理后的文本内容保存下来，以便下一次输入时进行比较。如果输入的文本不是合法的数字格式，我们就将输入框的文本内容恢复为上一次的文本内容。