js如何控制光标和删除文本框的文字？

Question

我现在想做一个日期输入框： :
当我光标在第一个位置时，输入1，后面的0被删除，1被插入，光标后移

Answer 1

一个简单的思路，你这有 8 个 0，所以将这个输入框分为 8 个小输入框，调整样式，将它们的 placholder 设为 0，然后每次输入后，聚焦到下一个小输入框。

Answer 2

思路：
JS改变光标位置
HTMLInputElement.setSelectionRange()
https://developer.mozilla.org...

Answer 3

参考了@Hikamai 的思路，不过我用的是同样的input，而不是div，这样能更容易复制一个样式完全一样的input。下面的input只使用placeholder，上面的才用于输入。效果图如下：

用Vue2实现的代码如下：

html部分

<div id="app">
  <div class="wrapper">
    <input :placeholder="placeholder" />
    <input type="text" v-model="value" placeholder="0000.00.00" />
  </div>
</div>

js部分

var app = new Vue({
  el: '#app',
  data: {
    value: ''
  },
  computed: {
    placeholder() {
      return this.value + '0000.00.00'.slice(this.value.length)
    }
  }
})

完整示例代码：RunJS DEMO