js onkeyup留言预览效果

最新推荐文章于 2024-09-15 17:50:11 发布

y刺猬的拥抱

最新推荐文章于 2024-09-15 17:50:11 发布

阅读量213

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_42336593/article/details/80783814

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		.main{
			width: 1000px;
			height: 300px;
			margin:0 auto;
		}
		.left{
			width: 450px;
			height:100%;
			padding:10px;
			float: left;
			border:2px dashed #000;
			background: #ccc;
		}
		.right{
			width: 450px;
			padding:10px;
			height:100%;
			float: right;
			background: #ccc;
			border:2px dashed #000;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="left">
			<p>用户名：<p id="s1"></p></p>
			<p>留言板：<p id="s3"></p></p>
		</div>
		<div class="right">
			<form>
				<p>用户名：</p>
				<input type="" name=""  value="" placeholder="user1" id="s2">
				<p>留言板：</p>
				<textarea  name="text" rows="5" cols="60" placeholder="请留言" id="s4"></textarea>
				<p><input type="submit" value="Ok"></p>
			</form>
		</div>		
	</div>
<script type="text/javascript">
	s1obj=document.getElementById('s1');
	s2obj=document.getElementById('s2');
	s3obj=document.getElementById('s3');
	s4obj=document.getElementById('s4');
	supobj=document.getElementById('sup')
	s2obj.οnkeyup=function(){
		val=s2obj.value;
		s1obj.innerHTML=val;
	}
	s4obj.οnkeyup=function(){
		val1=s4obj.value;
		s3obj.innerHTML=val1;
	}
</script>
</body>
</html>