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

【问题标题】：HTML text input not updating with Knockout BindingsHTML 文本输入未使用 Knockout 绑定更新
【发布时间】：2020-06-13 01:33:39
【问题描述】：

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

<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 设置订阅者以在值更改时对其进行修改？

【问题讨论】：

标签： javascript html knockout.js html-input

【解决方案1】：

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

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 } " 
/>

【讨论】：