我正在尝试在 AngularJS website 上复制双向数据绑定(bind)示例.
这是我的代码(为简洁起见用 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
、keydown
或任何其他方法实现快速 View 更新?
最佳答案
绑定(bind)输入
以获得即时同步。 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 以获取在 Angular 之外支持此功能的小型库。 http://rivetsjs.com
编辑:添加了事件支持检查,让您回到过去的 IE9(如果您关心这些事情。)
关于javascript - Vanilla Javascript 文本框数据绑定(bind),如 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33244273/