使用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>