本文介绍了一个简单的HTML页面，该页面使用JavaScript实现两个输入框的实时反馈功能。左侧显示输入的内容，右侧供用户输入。当用户在右侧输入框中输入文字时，左侧会立即显示相同的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width: 50%; height: 400px; outline: 1px dashed black; float: left;">
<p>用户名：</p>
<p id="z1"></p>
<p>评论：</p>
<p id="z2"></p>
</div>
<div style="width: 50%; height: 400px; outline: 1px dashed black; float: left;">
<p>用户名：</p>
<input type="text" id="z3" placeholder="1111"/>
<p>评论：</p>
<textarea id="z4" style="width: 90%; " cols="100"></textarea>
</div>
</body>
<script>
obj1=document.getElementById('z3');
obj2=document.getElementById('z1');
obj3=document.getElementById('z4');
obj4=document.getElementById('z2');
obj1.onkeyup=function(){
val=obj1.value;
obj2.innerHTML=val;
}
obj3.onkeyup=function(){
val=obj3.value;
obj4.innerHTML=val;
}
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width: 50%; height: 400px; outline: 1px dashed black; float: left;">
<p>用户名：</p>
<p id="z1"></p>
<p>评论：</p>
<p id="z2"></p>
</div>
<div style="width: 50%; height: 400px; outline: 1px dashed black; float: left;">
<p>用户名：</p>
<input type="text" id="z3" placeholder="1111"/>
<p>评论：</p>
<textarea id="z4" style="width: 90%; " cols="100"></textarea>
</div>
</body>
<script>
obj1=document.getElementById('z3');
obj2=document.getElementById('z1');
obj3=document.getElementById('z4');
obj4=document.getElementById('z2');
obj1.onkeyup=function(){
val=obj1.value;
obj2.innerHTML=val;
}
obj3.onkeyup=function(){
val=obj3.value;
obj4.innerHTML=val;
}
</script>
</html>
扫一扫
1218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
