javascript - 使用 Javascript 动态显示输入值

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