textarea文本提交保存,前端显示之前保存textarea回车换行以及把之前保存文本回显到textarea的解决方案

最新推荐文章于 2024-06-25 10:31:45 发布

Ronin_zhou

最新推荐文章于 2024-06-25 10:31:45 发布

阅读量4k

点赞数

本文链接：https://blog.csdn.net/qq_39024012/article/details/90080496

版权

直接上代码,路径请自行替换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试</title>
		<link rel="stylesheet" href="css/index.min.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<style>
		.wrap{
			display: flex;
			text-align: center
		}
		.left{
			flex: 1;
			width: 100%;
		}
		.right{
			flex: 1;
			float: left;
		}
		button{
			display: block;
			margin: 20px auto;
		}
		p{
			margin: 20px 0;
		}
	</style>
	<body>

		<div class="wrap">
			<div class="left">
				<p>该文本域用于提交</p>
				<textarea name="" id="leftTextarea" cols="30" rows="10"></textarea>
				<button id="getValueBtn">获取文本域的内容</button>
			</div>
			<div class="right">
				<p>该文本域用于回显</p>
				<textarea name="" id="rightTextarea" cols="30" rows="10"></textarea>
				<button id="showTextareaVal">回显</button>
			</div>


		</div>
		
		<p>文本域的内容:</p>
		<div class="showText"></div>
		
	</body>
</html>

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	var submitVal=''

	//提交的时候把文本域中的换行替换为<br/>标签
	function setLineFeed(str){
		if(typeof str  === 'string' ){
		let str1 = str.replace(/\r{0,}\n/g, '<br/>').replace(/\s/g, '&nbsp;')
			return str1
		}else{
			return ''
		}
	}

	//回显的时候在textarea里面把<br/>标签的换成换行
	function getLineFeed(str){
		if(typeof str  === 'string' ){
		let str1 = str.replace(/<br\/>/g, '\n').replace(/\&nbsp\;/g, ' ')
			return str1
		}else{
			return ''
		}
	}
	
	//获取文本域的内容并显示在页面上
	$("#getValueBtn").click(function(){
		let val = $('#leftTextarea').val();
		submitVal=val
		$(".showText").html(setLineFeed(val))
	})


	//点击回显的时候把之前保存的回显到文本域中
	$("#showTextareaVal").click(function(){
		$("#rightTextarea").val(getLineFeed(submitVal))
	})

</script>

效果图
在这里插入图片描述