当TextArea开启自动换行时,通过同步提交可以在后台获取到自动换行符,但是如果通过js读取进行异步提交时,却无法获取到自动换行符。这里先给出两种半吊子解决方案:

1 利用IE的createTextRange可以通过移动扩展光标直到内容超出TextArea宽度时结束,该方法不支持跨浏览器,而且在混合有手工换行时容易出错

2 计算字符宽度,制作一张中英文以及各个特殊字符的像素宽度表,然后计算出是否超出TextArea宽度,该方法太过于复杂,个人没有实现。

本文给出在实际应用中实现如何完美获取TextArea的每一行数据,包括自动换行以及手动换行符,主要原理为向一个隐藏域一一追加字符,直到其宽度大于TextArea宽度为止。

<textarea id="testContentTextArea" wrap="virtual" style="width:400px;word-wrap: break-word;word-break: break-all;"/>

1:创建一个隐藏域作为宽度检测,如span、div等。这里以span为例:

<span id="testSpanForCheck" style="">

需要注意,隐藏域的属性需要与textarea一致,并且隐藏域的宽度能够扩展到textarea一样宽

2 获取textarea内容,并通过js处理,将内容分割为按行显示,换行符用#表示,示例以jquery方式读取为例。

第一步:读取内容,并按照手工换行符分隔为字符串数组

var content = $("#testContentTextArea").val().split("\n");

var result="";
var contentWidth = $("#testContentTextArea").width();
$("#testSpanForCheck").text("");

第二步:检测每一字符串内容是否超过textarea宽度,超过则追加换行。需要注意的是,innerText方法会将多个空格合并为一个,所以在追加时需要将空格转为普通字符,如a

$.each(content, function(i, val){
	var valLength = val.length;
	if(valLength == 0) {
		result += "#";
	} else {
		var pre = "", innerVal, tempWidth;
		for(var innerI = 0; innerI < valLength; innerI++) {
			innerVal = val.charAt(innerI);
			if(innerVal == " ") {
				$("#testSpanForCheck").text($("#testSpanForCheck").text() + "a");  //追加字符,如果为空格则追加为a(innerText方法会将多个空格合并为一个,所以需要转换)
			} else {
				$("#tempContent").text($("#tempContent").text() + innerVal);   //非空格则直接追加
			tempWidth = $("#testSpanForCheck").width();   //获取添加字符后隐藏域的宽度
			if(tempWidth > contentWidth) {
				result += pre;	//如果追加字符后隐藏域宽度大于TextArea宽度,则表明该字符为下一行字符,
				result += "#";
				$("#testSpanForCheck").text(innerVal);
				pre = innerVal;
			} else if(innerI == valLength - 1) {
				result += pre + innerVal;	//最后一个字符
				result += "#";
				$("#testSpanForCheck").text("");
				pre = "";
			} else {
				pre += innerVal;	//依次追加到pre变量中
});
3 获取到result,其即为包含手工以及自动换行符的数据,换行符均被转为#
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;
1.html页面:2. js 获取 textarea 值正常情况下:var text = document.getElementById('advice— textarea ').innerHTML var text =$("#radvice— textarea ").val();如果以上方法 获取 不到,请先查看$("#radvice— textarea ")到底是什么,一步步去得到你想到的数据;比如曾经用这种方式得到...
node. js 使用readline按行 读取 文件内容1.实现代码var fs = require('fs'); var readline = require('readline'); * 按行 读取 文件内容 * 返回: 字符串 数组 * 参数:fReadName:文件名路径 * callback:回调函数 function readFileToArr(fReadName,cal...
textarea 多行文本 换行保存的时候,其实保存的是‘\n’,直接再 读取 textarea 多行文本里是没有问题的 但是要放在页面上展示,‘\n’不会换行,所以在多行文本框保存的时候,要先进行转换,'\n’转换成‘<br/>’标签,这样可以直接 读取 成换行展示,例如: this.InfoList[5].valueText=this.InfoList[5].valueText.rep...
具体代码实现如下: var fs = require(&amp;quot;fs&amp;quot;); var readLine = require(&amp;quot;readline&amp;quot;); * 按行 读取 文件内容 * @param fReadName 文件名路径 * @param cb 回调函数 * @return 字符串 数组 function readFileToArr(fReadName,
web使用JavaScript单击一个按钮 读取 text1中的 字符串 ,然后保留text中包含在text1中输入的子 字符串 的行,例如: 读取 1和2,则保留第 一行 和第二行
```javascript var inputStr = document.getElementById("text1").value; // 获取 text1中的 字符串 var targetStrs = inputStr.split(","); //将输入的 字符串 以逗号分隔,存储为数组 var textArea = document.getElementById("text"); // 获取 文本框 var lines = textArea .value.split("\n"); //以 换行符 分隔,将文本框中的内容存储为数组 var result = ""; //存储符合要求的文本行 for (var i = 0; i < lines.length; i++) { for (var j = 0; j < targetStrs.length; j++) { if (lines[i].indexOf(targetStrs[j]) != -1) { //判断该行是否包含输入的子 字符串 result += lines[i] + "\n"; //将符合条件的文本行存储到result中 break; //如果已经找到符合条件的文本行,则跳出循环 textArea .value = result; //将符合条件的文本行显示在文本框中 使用该代码时需要在HTML中添加以下元素: ```html <label for="text1">输入要匹配的 字符串 (多个使用逗号分隔)</label> <input type="text" id="text1"> <label for="text">文本内容</label> < textarea id="text" rows="10" cols="50"></ textarea > <button onclick="filter()">筛选</button> 其中`filter()`为点击按钮后执行的函数名。