使用Javascript動態顯示輸入值

Question

我有一個表單，並且我希望在填寫表單時動態顯示某些表單元素。

想象一下，如果我有你的名字的文本輸入。當你輸入時，我也希望你的名字出現在網頁的不同部分。

我會如何以最簡單的方式完成此操作？

Answer 1

（請參見下面的更新，我意識到以後我已經完全忘記了使用鼠標操作來處理粘貼文本到字段中。）

您可以掛鉤keypress事件（你可能會想​​和keyup），並使用它觸發其他地方的DOM元素更新。例如：

var nameField = document.getElementById('nameField'); 
nameField.onkeydown = updateNameDisplay; 
nameField.onkeyup = updateNameDisplay; 
nameField.onkeypress = updateNameDisplay; 
function updateNameDisplay() { 
    document.getElementById('nameDisplay').innerHTML = this.value || "??"; 
} 

Live example

這是使用DOM0式的事件處理程序（以下簡稱「onXyz」屬性，我通常不喜歡），一個非常簡單的例子。執行這些操作的最簡單的方法是使用類似jQuery,Prototype,YUI,Closure或any of several others的庫。他們會爲您瀏覽瀏覽器差異，讓您專注於您實際嘗試做的事情。

下面是使用jQuery以上：

$('#nameField').bind('keydown keyup keypress', function() { 
    $('#nameDisplay').html(this.value || "??"); 
}); 

Live example

---

更新：其實，上面會錯過之類的東西粘貼到使用鼠標領域。你可能會認爲一個change處理器將有利於這一點，但它並不一定觸發，直到焦點離開現場，所以它並不少見，使用這樣的定時過程：

的JavaScript，沒有圖書館：

var nameField = document.getElementById('nameField'); 
var lastNameValue = undefined; 

updateNameDisplay(); 

setInterval(updateNameDisplay, 100); 

function updateNameDisplay() { 
    var thisValue = nameField.value || "??"; 
    if (lastNameValue != thisValue) { 
    document.getElementById('nameDisplay').innerHTML = lastNameValue = thisValue; 
    } 
} 

Live example

你要避免這些單獨爲每個字段（相反，使用所有這些單一的定時器），你會想根據調整計時器你真正需要  —對以下事實很敏感：當你在做t他，你正在消耗資源。如果你想停止在某一階段的檢查（這是一個好主意），從setInterval保存返回值：

var timerHandle = setInterval(updateNameDisplay, 100); 

...和停止這樣的循環：

clearInterval(timerHandle); 
timerHandle = 0; 

---

下面是一個更完整的動態監視字段的例子，只有當字段有焦點時才使用計時器。我在這個例子中使用了jQuery，因爲它簡化了它，並且你問了簡單的問題（如果你使用另一個庫或者不使用任何庫，你可以很容易地移植它;主要的地方jQuery在這種情況下是有用的在尋找表單中輸入）：

jQuery(function($) { 
    var formTimer = 0, 
     currentField, 
     lastValue; 

    updateWatchingIndicator(); 
    $('#theForm :input') 
    .focus(startWatching) 
    .blur(stopWatching) 
    .keypress(updateCurrentField); 

    function startWatching() { 
    stopWatching(); 
    currentField = this; 
    lastValue = undefined; 
    formTimer = setInterval(updateCurrentField, 100); 
    updateWatchingIndicator(); 
    } 

    function stopWatching() { 
    if (formTimer != 0) { 
     clearInterval(formTimer); 
     formTimer = 0; 
    } 
    currentField = undefined; 
    lastValue = undefined; 
    updateWatchingIndicator(); 
    } 

    function updateCurrentField() { 
    var thisValue; 

    if (currentField && currentField.name) { 
     thisValue = currentField.value || "??"; 
     if (thisValue != lastValue) { 
     lastValue = thisValue; 
     $('#' + currentField.name + 'Display').html(thisValue); 
     } 
    } 
    } 

    function updateWatchingIndicator() { 
    var msg; 

    if (currentField) { 
     msg = "(Watching, field = " + currentField.name + ")"; 
    } 
    else { 
     msg = "(Not watching)"; 
    } 
    $('#watchingIndicator').html(msg); 
    } 

});​ 

Live example

Answer 2

使用JavaScript的onkeypress事件的事件。檢查這個w3schools page關於它。然後您可以使用它來調用一個函數，該函數將更新您想要顯示該項目的dom元素。應該去這樣的事情：

<script type="text/javascript"> 
function update(element) 
{ 
    document.getElementById("dynamic_name").innerHTML = element.value; 
} 
</script> 
<input type="text" onkeypress="update(this)" /> 
<div id="dynamic_name"></div> 

你可以明顯地重命名元素和移動它們，但這是一般的概念。

Answer 3

一個非常簡單而優雅的解決方案是使用AngularJS：

<input type='text' ng-model='userText'/> 
<p ng-bind='userText'></p>