多个javascript实时更新输入字段

时间:2013-08-03 21:55:45

标签: javascript html forms

我希望有多个输入可以输出用户在一个页面的输入框中放置的内容以及实时更新。我目前只能获得一个输入现场工作。

HTML代码

<input type=text></input><!-- inputs live text -->
<p id="headingone"></p><!-- outputs live text -->

Javascript代码

function reverse(s) {
  return s.split('').reverse().join('')
}

function set(el, text) {
  while (el.firstChild) el.removeChild(el.firstChild);
  el.appendChild(document.createTextNode(text))
}

function setupUpdater() {
  var input = document.getElementsByTagName('input')[0]
    , orig = document.getElementById('headingone')
    , oldText = input.value
    , timeout = null;

  function handleChange() {
    var newText = input.value;
    if (newText == oldText) return;
    else oldText = newText;
    set(orig, newText);
  }

  function eventHandler() {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(handleChange, 50);
  }
  input.onkeydown = input.onkeyup = input.onclick = eventHandler;
}

setupUpdater();
document.getElementsByTagName('input')[0].focus();

0 个答案:

没有答案