像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文本框數據綁定

回答

相關問題