Question

我有一个表单，我想在填写表格后立即动态显示表单的某些元素。

想象一下，如果我的名字有文字输入。在您输入时，我还希望您的姓名出现在网页的其他部分。

我如何以最简单的方式实现这一目标？

Answer 1

（请参阅下面的更新，我后来意识到我完全忘记使用鼠标操作将文本粘贴到字段中。）

您可以在文本输入字段上挂钩keypress事件（您可能还需要keydown和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

你会想避免为每个字段单独使用这些字段（而是为所有字段使用单个计时器）并且你需要根据实际需要调整计时器 - 对它敏感事实上，当你这样做时，你正在消耗资源。如果您想在某个阶段停止检查（这是一个好主意），请保存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>

使用Javascript动态显示输入值

3 个答案: