• 工作中遇到的一个有关<textarea></textarea>换行的问题


    问题大致描述如下:

      有一个对比的页面,左右各一个大的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 += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>,最后考虑多拼几个&nbsp;在行末尾,在复制的时候找到这几个空格作为标记,来实现复制时的换行,复制的事件绑定在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);
        }
    }

  • 相关阅读:
    Python04 range()方法的使用、turtle.textinput()方法和write()的使用、turtle.numinput()的使用
    SpringBoot12 QueryDSL02之利用QueryDSL实现多表关联查询
    SpringBoot12 QueryDSL01之QueryDSL介绍、springBoot项目中集成QueryDSL、利用QueryDSL实现单表RUD、新增类初始化逻辑
    ES02 变量、数组、对象、方法
    JavaScript问题01 js代码放在header和body的区别
    Python03 字符串类型、强制类型转化、列表、元组、字典、集合
    Python02 标准输入输出、数据类型、变量、随记数的生成、turtle模块详解
    使用 Multipath TCP 为 iOS 创建备份连接(转)
    linux中的条件变量
    linux中网络编程<1>
  • 原文地址:https://www.cnblogs.com/Cratical/p/1815885.html
Copyright © 2020-2023  润新知