<!DOCTYPE html> <html> <head> <title>同步顯示</title> <meta charset="utf-8"> </head> <body> <div> <input type="text" name="user_input"> <span id="content">你輸入的內容是：</span> </div> <script type="text/javascript"> var de = document.getElementById("content"); var txt = de.innerHTML; document.getElementsByTagName("input")[0].oninput = function () { document.getElementById("content").innerHTML = txt+this.value; } </script> </body> </html>
1，這里使用input的text類型，oninput事件會在文本框獲得焦點期間處於持續觸發狀態，直到失去焦點。
2，若使用onchange事件，會在輸入完成后按下回車，或者點一下其他位置才會觸發，說明onchange事件在文本框獲得焦點時就緒，在失去焦點時才觸發，所以不能實現在每輸入一個新字符時將內容同步到span標簽內。
ps：如果寫成：
document.getElementById("content").innerHTML += this.value;
這行代碼會導致文本框的值反復的被添加到span，所以提前聲明一個txt，保存初始值，寫成如下
document.getElementById("content").innerHTML = txt+this.value;