jQuery onChange將字段值添加到HTML

Question

我想將輸入字段的值實時打印到DIV。

現在我有這樣的：

 $("#page_name").change(function() { 

      var new_val = $("#page_name").val(); 

      $("#page_url").html(new_val); 

     }); 

它不工作，效果顯着。任何人都有一個建議？

謝謝！

Answer 1

正如指出的「變化」，只有當元素失去焦點時發生。將它綁定到按鍵事件的另一種方法是將其綁定到「輸入」事件。

$('#page_name').bind('input', function(e){ 
    var output = e.target.value; 
    $('#page_url').text(output); 
}); 

http://jsfiddle.net/xY7Q6/

與按鍵的問題是，它不復制&粘貼文本。

輸入事件幾乎是什麼大家都希望「變革」是（○：？我覺得這個事件是相當新的（HTML5），舊的瀏覽器可能不會得到一個

Answer 2

那應該實際上工作。我最好的猜測是這樣的：

1. 檢查你的選擇器，也許。此外，您可以使用$（this）而不是第二次選擇#page_name。
2. 變化並不總是像你想象的那樣經常發生。嘗試將事件綁定到鍵入。
3. 此外，它可能是一個壞主意.html（）節點。你可能想要.text（）它是安全的。

Answer 3

實際上它會工作，但只有當您將光標移出輸入框時，因爲更改在焦點丟失時觸發。

你需要的是按鍵。該代碼只是你的一樣

$("#page_name").keypress(function() { 
      var new_val = $("#page_name").val(); 
      $("#page_url").html(new_val); 
}); 

測試在這裏

http://jsfiddle.net/y3zpP/