HTML文本输入未使用敲除绑定更新

Question

我正在尝试为DOB输入字段自动添加斜杠，但敲除绑定的效果不佳。

<input 
name=x 
size=10 
maxlength=10 
class="span12" 
placeholder="Date of birth (MM/DD/YYYY)"
  onkeyup="this.value=this.value.replace(/^(\d\d)(\d)$/g,'$1/$2').replace(/^(\d\d\/\d\d)(\d+)$/g,'$1/$2').replace(/[^\d\/]/g,'')"
  data-bind="value:visitor().dateOfBirth, valueUpdate:'keyup'" />

现在的问题是，Knockout Js绑定不允许斜线值自动更新。当我在文本框中输入日期时，不会显示斜线。如何为myViewModel设置订户以在值更改时修改值？

Answer 1

您应该按照以下方式做一些事情-请注意，您应该从onkeyup标记中删除内联的input，并让您的视图模型处理它：

var vm = function () {
  var self = this;
  self.dateOfBirth = ko.observable();
  self.insertSlashes = function () {
     var currentValue = self.dateOfBirth();
     self.dateOfBirth(currentValue
        .replace(/^(\d\d)(\d)$/g,'$1/$2')
        .replace(/^(\d\d\/\d\d)(\d+)$/g,'$1/$2')
        .replace(/[^\d\/]/g,'')
    );
  }
}
ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input 
  placeholder="Date of birth (MM/DD/YYYY)"
  data-bind="value: dateOfBirth, valueUpdate:'keyup', event: { keyup: insertSlashes } " 
/>