jquery - 替换输入表单中的字符，但保留光标位置

Question

我需要创建一个日期输入表单，例如:

<input type="text" id="field" maxlength="10" value="__/__/____"/>

当用户输入日期值时，它应该用输入的值替换每个底行:

var firstValue= $("#field").val();

$("#field").keypress(function (e) {
  var pattern = /^\d*(\d*)?$/;
  var digit= String.fromCharCode(e.keyCode);
  if (digit.match(pattern)) {
    $("#field").val($("#field").val().replace("_", digit))
  }
  else 
    event.target.value = firstValue;
});

一切工作正常，除了在输入过程中光标始终固定在输入表单的末尾。有人知道为什么会发生这种情况吗？你能帮助我让光标跟随输入吗？

Answer 1

无需重新发明轮子。使用jQuery Masked Input Plugin相反:

It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates, phone numbers, etc). It has been tested on Internet Explorer, Firefox, Safari and Chrome.