js获取TextArea每一行字符串(包括自动换行符)的解决方案
2013-11-20 17:39
2601 查看
当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=visibility:hidden"">
需要注意,隐藏域的属性需要与textarea一致,并且隐藏域的宽度能够扩展到textarea一样宽
2 获取textarea内容,并通过js处理,将内容分割为按行显示,换行符用#表示,示例以jquery方式读取为例。
第一步:读取内容,并按照手工换行符分隔为字符串数组
var content = $("#testContentTextArea").val().split("\n");
var result="";
var contentWidth = $("#testContentTextArea").width();
$("#testSpanForCheck").text("");
第二步:检测每一字符串内容是否超过textarea宽度,超过则追加换行。需要注意的是,innerText方法会将多个空格合并为一个,所以在追加时需要将空格转为普通字符,如a
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=visibility:hidden"">
需要注意,隐藏域的属性需要与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,其即为包含手工以及自动换行符的数据,换行符均被转为#
相关文章推荐
- js 给textarea输入框内容自动添加换行符
- js实现字符串的去重,form表单的自动获取值返回为json
- 用scanf获取一行字符串包括空格的以及C语言函数
- 用scanf获取一行包括空格的字符串,并指定以特定输入结束读入
- js获取(包括中文)字符串长度与截取字符串
- 用scanf获取一行字符串包括空格的以及C语言函数
- js把预定义的html字符串转换为 HTML 实体 htmlspecialchars 输出html实体内容包括标签,而不自动转义标签,只显示内容,类似php的htmlspecialchars
- vue.js 2.x 版本script里面的dom被过滤,从而获取不到dom字符串的解决方案
- js获取textarea标签中的换行符和空格。
- (转)用scanf获取一行包括空格的字符串
- html中的css和js控制input,textarea文本框自动获取焦点
- 用scanf获取一行字符串包括空格的以及C语言函数
- (NSScanner的使用)替换服务器获取的JSON数据中的换行符(JSON是不能解析带有换行符字符串)
- js获取字符串的字节长度
- 基于 aspnet 的自动合并输出js和css的解决方案
- js 获取字符串长度方法length
- js 获取字符串最后一位的4种方法
- 如何用JS实现打开一个页面自动定位到某一行
- js 实现input框自动获取系统时间
- JS获取url链接字符串 location.href