像AngularJS的香草JavaScript文本框数据绑定

我试图复制AngularJS website上的双向数据绑定示例。像AngularJS的香草JavaScript文本框数据绑定

这里是我的代码（在JQuery中的说法为简洁起见）：

$('#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); 
});

它能正常工作，但似乎有某种来自键被释放的时间延迟，在显示文本。这个延迟在AngularJS网站上没有发生。

我已经尝试过'keydown'事件变体（这照顾延迟），但它看起来像在.val()调用之前没有更新文本框的值（所以我总是一键按下）。

如何使用keyup,或其他方法实现快速查看更新？

来源

2015-10-20 Obinwanne Hill

https://jsfiddle.net/gu p9atf0/ –

@JonahWilliams This Works！请作为回答 –

绑定input以获得即时同步。 https://developer.mozilla.org/en-US/docs/Web/Events/input

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()); 
    } 
});

此外，结账出来支持的角度超出这个功能，一个小型图书馆RivetsJS。 http://rivetsjs.com

编辑：添加的事件支持支票带您回到过去IE9

来源

2015-10-20 18:41:07

即使IE9有警告..忘记到底是什么，但我认为它忽略退格 – charlietfl

是的，添加了一个关于这一点的说明。一个浏览器检测方法将是适当的，然后只需使用'input keyup'作为事件。你得到双重执行，但这是公平的妥协。 –

@dboskovic谢谢。我试过'.on（'input keyup'）'，它效果很棒！将在IE浏览器上测试并根据需要进行调整。那和你的代码有很大的区别吗？ –

我看不出太大的延迟，但它可以帮助（如果你关心这样的事情。）如果缓存jQuery的对象（越大DOM，更多的，这将帮助）：

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); 
});

https://jsbin.com/ruxajowolo/edit?html,js,output

来源

2015-10-20 18:43:45 spmurrayzzz

绝对有帮助...不需要每个按键的dom搜索。 '$ box'不会有任何区别，尽管...'$ view'会。 'this.value'比使用jQuery更有效 – charlietfl

她遇到的问题可以通过绑定到'input'事件来解决。 –

@dboskovic谨慎，老的浏览器不支持事件http://caniuse.com/#search=input – charlietfl

像AngularJS的香草JavaScript文本框数据绑定

回答

相关问题