像AngularJS这样的普通Javascript文本框数据绑定

我试图在上复制双向数据绑定示例

以下是我的代码（用JQuery的说法，为了简洁）：

它的工作原理与预期一样，但从按键释放到文本显示之间似乎存在某种延迟。这种延迟不会发生在AngularJS网站示例上

我尝试了一个“keydown”事件变体（它考虑了延迟），但在调用

.val（）

之前，文本框值似乎没有更新（因此我总是落后一键）

---

如何使用

keyup

、

keydown

或任何其他方法实现快速查看更新？

绑定

input

以获得即时同步

此外，请签出一个小型库，该库在Angular之外支持此功能。

---

编辑：添加了事件支持检查，让您回到IE9之前（如果您关心这些事情的话）。

我看不出有太大的延迟，但是如果缓存jquery对象，它可能会有所帮助（DOM越大，这将越有帮助）：

---

@JonahWilliams这行得通！请以回复的形式发布绝对有帮助…不需要每次击键都进行dom搜索。不过，

$box

不会有任何区别<代码>$view将显示

this.value

甚至比使用jquery更有效她遇到的问题是通过绑定到

input

事件来解决的。@dboskovic注意，旧浏览器@dboskovic不支持该事件，因为它的支持不是通用的，我倾向于避免使用它，除非我有内置的功能detection@charlietfl说得好。我通常不再考虑IE9以外的支持。但在我的示例中添加了一个条件。我想你也可以监视这两个事件。即使IE9也有警告。。忘了它们到底是什么，但我认为它忽略了Backspace是的，补充了一条关于这一点的注释。浏览器检测方法是合适的，然后只使用

input keyup

作为事件。你会被双重处决，但这是一个公平的妥协。@dboskovic谢谢。我尝试了（'input keyup'），效果非常好！将在IE浏览器上进行测试，并根据需要进行调整。这和你的代码有很大区别吗？@obinwanehill我编辑了我的答案并添加了完全的交叉浏览器支持。你现在应该很好了。@dboskovic谢谢。我在IE8和IE9上尝试了

.on（'input keyup'）

，在添加字符时效果很好。然而，我注意到退格的延迟（由于[IE9]的输入错误/返回到keyup），我可以接受。实际上，我正在使用一个自定义的.on方法，该方法对IE8有一个回退到

onpropertychange

。干杯

$('#model-textbox').on('keyup', function(){
    //get value of text box
    var text_box_str = $(this).val();

    //add it to the view
    $('#view-div').html(text_box_str);
});

var $view = $('#view-div');
var ie9 = navigator.appVersion.indexOf("MSIE 9.")!=-1;
var event = ('oninput' in document.documentElement && !ie9) && 'input' || 'keypress';

$('#model-textbox').on(event, function(){
    var $el = $(this);
    if(event === 'keypress') {
      setTimeout(function(){ $view.text($el.val()); },0);
    } else {
      $view.text($el.val());
    }
});

var $view = $('#view-div');
var $box = $('#model-textbox');
$box.on('keyup', function(){
    //get value of text box
    var text_box_str = $box.val();

    //add it to the view
    $view.html(text_box_str);
});