工作中遇到的一个有关<textarea></textarea>换行的问题
2010-09-02 12:22
441 查看
问题大致描述如下:
有一个对比的页面,左右各一个大的textarea,分别显示处理前后的配置内容,处理过程就不赘述了,要求两个textarea中可以显示对比过程中不一样的地方,用颜色区分,支持复制对比内容。
由于配置内容的生成和对比都由是后台java生成的,所以我将颜色也随同配置内容一起拼起来了,然后把新旧配置的内容逐行封装到一个数据结构中,然后在jsp页面上分别显示出来。
生成时的逻辑如下:
<%
String[] textAndColor = {""};
for (int i = 0; i < beforeText.size(); i++)
{
textAndColor = beforeText.get(i).toString().split(";@;");%>
<script>
var str="<font color='<%out.print(textAndColor[1]);%>'><%=textAndColor[0]%></font>";
str += " <br/>";
oA=document.createElement('LabelA');
oA.innerHTML=str;
document.all('beforeTX').appendChild(oA)
</script>
<%
}
%>
每一行文件内容,都是以“文件内容+;@;分隔标记+颜色”组成,然后通过JavaScript以innerHTML的方式添加进textarea中,由于在textarea中,换行不能是"\n",只能是<br/>,所以要拼一个<br/>
这时候出现一个问题,由于要支持任意内容的复制,所以我考虑用clipboardData.getData("Text");这种方式来获取剪贴板中的内容,并对其做处理,将其中的<br/>替换成"\r\n",但是我发现clipboardData.getData("Text");这种方式好像就获取不到那个<br>,这里要说明一下,将文件内容用上述方式拼到textarea中之后,<br/>就变成了<BR>,而clipboardData.getData("Text");的方式获取不到那个<BR>,最后考虑多拼几个 在行末尾,在复制的时候找到这几个空格作为标记,来实现复制时的换行,复制的事件绑定在textarea上面,这样,问题得到了一个比较好的解决,但是我觉得这不是一个最好的解决办法,希望遇到过类似问题的朋友能够指点一下。
代码如下:
String.prototype.replaceAll = function(s1,s2){return this.replace(new RegExp(s1,"gm"),s2); }
var cKeyCode = "67";
function copyContent() {
if (event.ctrlKey && event.keyCode == cKeyCode) {
var d = clipboardData.getData("Text");
d = d.replaceAll(" ", "\r\n");
alert("复制成功");
window.clipboardData.setData('Text', d);
}
}
有一个对比的页面,左右各一个大的textarea,分别显示处理前后的配置内容,处理过程就不赘述了,要求两个textarea中可以显示对比过程中不一样的地方,用颜色区分,支持复制对比内容。
由于配置内容的生成和对比都由是后台java生成的,所以我将颜色也随同配置内容一起拼起来了,然后把新旧配置的内容逐行封装到一个数据结构中,然后在jsp页面上分别显示出来。
生成时的逻辑如下:
<%
String[] textAndColor = {""};
for (int i = 0; i < beforeText.size(); i++)
{
textAndColor = beforeText.get(i).toString().split(";@;");%>
<script>
var str="<font color='<%out.print(textAndColor[1]);%>'><%=textAndColor[0]%></font>";
str += " <br/>";
oA=document.createElement('LabelA');
oA.innerHTML=str;
document.all('beforeTX').appendChild(oA)
</script>
<%
}
%>
每一行文件内容,都是以“文件内容+;@;分隔标记+颜色”组成,然后通过JavaScript以innerHTML的方式添加进textarea中,由于在textarea中,换行不能是"\n",只能是<br/>,所以要拼一个<br/>
这时候出现一个问题,由于要支持任意内容的复制,所以我考虑用clipboardData.getData("Text");这种方式来获取剪贴板中的内容,并对其做处理,将其中的<br/>替换成"\r\n",但是我发现clipboardData.getData("Text");这种方式好像就获取不到那个<br>,这里要说明一下,将文件内容用上述方式拼到textarea中之后,<br/>就变成了<BR>,而clipboardData.getData("Text");的方式获取不到那个<BR>,最后考虑多拼几个 在行末尾,在复制的时候找到这几个空格作为标记,来实现复制时的换行,复制的事件绑定在textarea上面,这样,问题得到了一个比较好的解决,但是我觉得这不是一个最好的解决办法,希望遇到过类似问题的朋友能够指点一下。
代码如下:
String.prototype.replaceAll = function(s1,s2){return this.replace(new RegExp(s1,"gm"),s2); }
var cKeyCode = "67";
function copyContent() {
if (event.ctrlKey && event.keyCode == cKeyCode) {
var d = clipboardData.getData("Text");
d = d.replaceAll(" ", "\r\n");
alert("复制成功");
window.clipboardData.setData('Text', d);
}
}
相关文章推荐
- Mybatis 使用<where>标签时遇到的一个问题与<trim>标签的使用
- Android 开发过程中遇到了一个问题 小记录一下 ERROR: In <declare-styleable> BorderLinearLayout, unable to find attribu
- 遇到问题----win7安装apache服务出现 <OS 10013> 以一种访问权限不允许的方式做了一个访问套接字的尝试
- 遇到问题----win7安装apache服务出现 <OS 10013> 以一种访问权限不允许的方式做了一个访问套接字的尝试
- maven 遇到failOnMissingWebXml有关问题解决方法:web.xml is missing and <failOnMissingWebXml> is set to true
- JSF web页面的<h:inputTextarea>和数据库存储的回车换行及<br />问题
- 关于List.addAll(Collection<E>)方法遇到的问题
- 总结最近SVN更新时遇到的"<<<<<<< .mine“,>>>>>.的问题
- android基于openfire+spark+amack 即时聊天--------<2>登录遇到的问题和重要类解析
- 解决<input type=“file” multiple> 多文件上传问题(可以多次选取文件,也可以一次选取多个文件),而且点击的是一个同一个div
- IE 6与IE 7 出现 Ie6下<li>不自动换行的问题
- 关于ul下<li></li>内插入<span>内容</span>标签自动换行不在同一行问题
- WebBrowser加载一个URL被多次调用DocumentCompleted 的问题解决方案<转>
- <整理>将项目打包成runable jar包并运行遇到的问题及解决办法记录。
- <项目一>请教一个关于获取post json数据的问题
- <shader>编程中遇到的问题-too many texture interpolators would be used for ForwardBase pass
- 浅析深究什么是中间件 发布时间: 2016-06-10 作者:本站编辑 浏览次数:128 摘要: 因为工作的原因,我从金蝶集团调入金蝶中间件公司工作以来,经常遇到一个问题就是中间件公司是个什么
- <PC>HP网络共享并创建一个热点问题
- 今天先学了一个数据库语句,我先记录下来,果然是在工作中遇到的问题,印象更深刻啊
- web.xml配置中<load-on-startup>0</load-on-startup>的一个问题