input框的val和div同步更新

最新推荐文章于 2021-06-03 20:05:56 发布

郭豪杨

最新推荐文章于 2021-06-03 20:05:56 发布

阅读量672

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42603150/article/details/81119421

本文提供了一个简单的示例，展示了如何使用JavaScript实现在文本框中输入的文字能够实时显示在网页的另一个区域（DIV层）。通过监听文本框的键盘输入事件，可以即时将内容同步到指定的HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>文本框中输入文字，页面中div层同步获取文本框内容</title>
	<style>
	textarea{width:300px;height:150px; border:1px solid #CCC; font-size:12px; color:#000;}
	p{ padding-left:30px; text-indent:-30px;width:270px;height:250px; border:1px solid #900; margin-top:50px; font-size:12px; color:#F00; line-height:21px; overflow:hidden}
	</style>
	<script type="text/javascript">
	function SwapTxt()
	{
	var txt = document.getElementById("eml").value;
	document.getElementById("lyny").innerHTML=txt;
	}
	</script>
	</head>
	<body>
	<textarea name="" cols="" rows="" class="loe_hk10" id="eml" onkeyup="SwapTxt()"></textarea>
	<p id="lyny">代码家园提示：请在上面的文本框中输入文字，如www.jb51.net</p>
	</body>
	</html>