textarea保留空格和回车符的格式提交表单

最新推荐文章于 2025-09-19 10:14:57 发布

原创最新推荐文章于 2025-09-19 10:14:57 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#textarea #html #web

javascript 同时被 2 个专栏收录

4 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文介绍了一种方法，确保HTML表单提交前后，文本区域的内容格式保持不变。通过JavaScript处理，使得用户输入的数据在预览时能够保留原有的换行和空格，从而达到一致的展示效果。

目的：为了保持提交表单前输入框内的内容格式和用户在看到自己的数据之后保持一致

test.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>textarea测试</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style type="text/css" media="screen">
		.cc{width:600px;height:100px;}
		#d1{background:#88eeff;font-size:14px;}
		#zwtj{font-size:14px;}
	</style>
	
	<script type="text/javascript">
	
	// 扩展String类型的替换全部函数
	String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) 
	{ 
		if (!RegExp.prototype.isPrototypeOf(reallyDo)) 
		{
			return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith); 
		}
		else 
		{
			return this.replace(reallyDo, replaceWith); 
		}
	}

	// 获取转义后的字符串 保留回车符、保留空格符
	function getTextAreaValue(strId)
	{
		var eTxt = document.getElementById(strId);
		var str = eTxt.value;
		str = str.replaceAll(" ", " ",true);
		str = str.replaceAll("\n", "<br/>",true);
		return str;
	}
	
	// 在div当中看转换后的textarea中的文本
	function showText()
	{
		var eD2 = document.getElementById("d1");
		
		eD2.innerHTML = getTextAreaValue("zwtj");
	}

	</script>
	</head>

	<body>

		<textarea name="zwtj" cols="80" rows="5" id="zwtj" ></textarea>
		<br/>
		<input type="button" value="查看文本↓" onclick="showText()" />
		<br/>
		<div class="cc" id="d1">
		@sonikk 2013-4-11 11:03:30
		</div>
			
	</body>
</html>