键盘事件，这里以onkeyup为例；
解析：当在一个input中输入文本时，在另一个div中输出文本
在下面是本人写的小demo，供分享。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键盘事件</title> <style> .bigDiv{ width: 600px; height: 400px; background: #ddd; margin:10px auto; text-align: center; } p{ padding-top: 100px; font-size: 30px; } .kuang1,.kuang2{ width: 100%; height: 80px; line-height: 80px; text-align: center; background: #afd9ee; margin-top: 20px; } .kuang2{ background: #afd9ee; } .shuru{ width: 600px; margin: 0 auto; text-align: center; } </style> </head> <body> <div class="bigDiv"> <p>以下是输入后显示的地方</p> <div class="kuang1"></div> <div class="kuang2"></div> </div> <div class="shuru"> 请输入用户名：<input class="input1" type="text" placeholder="用户名"> 密码：<input class="input2" type="text" placeholder="密码"> </div> <script> var input1=document.querySelector(".input1"); var input2=document.querySelector(".input2"); var kuang1=document.querySelector(".kuang1"); var kuang2=document.querySelector(".kuang2"); input1.onkeyup=function () { kuang1.innerHTML=input1.value; } input2.onkeyup =function(){ kuang2.innerHTML= input2.value; }; </script> </body> </html>
效果图如下：