首页 > 代码库 > html中键盘事件----在路上（16）
html中键盘事件----在路上（16）
键盘事件，这里以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>
效果图如下：
html中键盘事件----在路上（16）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。