zoukankan      html  css  js  c++  java
  • Js 与 TextArea

         当给一个js变量赋值一个有换行的值得时候,就会报错:

    <!DOCTYPE HTML>
    <html>
        <head>
            <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
            <script type="text/javascript">            
                $(document).ready(function(){
                    var bad = "大家 
                    早上好,
                    空气 
                    不错哦";
                         
                    $("#p1").html(bad);
                
                });
                
            </script>        
        </head>
        <body>
            <p id="p1"></p>
            <p id="p2"></p>
            <div>
                <textarea id="content"></textarea>
            </div>
        </body>
    </html>

    比如这段代码中,bad 变量赋值就出错了。

    什么时候会出现这种赋值呢,那就是从textarea的值存到数据库之后,然后取出来直接赋值某个js变量的时候就会出现这种情况。

    那就先从数据存入说起:

    textarea虽不是富文本,但是可以多行显示。比如这样:

    把textarea的值存入数据库中某个字段,你会看着这个字段中存入的 只有输入的这几个字,

    看不到其他html标记。但可以看出来 在回车的地方文字之间的距离宽一些,似乎有空格。

    取值 赋值:

    如果在js代码中直接这样赋值

    var bad = <%=badContent%>

    就会出现开头那个错误的赋值,一个多行的文本赋值给一个js变量。

    一个可行的办法是这样:在页面上设置一个隐藏域,将后台取的值放到隐藏域中,然后用js/jquery 把这个值取出来,赋值到 js变量上。

    (方法来源:http://bbs.csdn.net/topics/310152073

    然后将该js变量显示到需要显示textarea内容的html标签处。用下面的方式模拟一下,如下所示:

    <!DOCTYPE HTML>
    <html>
        <head>
            <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
            <script type="text/javascript">            
                
                
                function show()
                {
                    var content = $("#content").val();
                    $("#p1").html(content);
                }
                
            </script>        
        </head>
        <body>
            <p id="p1"></p>
            <p id="p2"></p>
            <div>
                <textarea id="content"></textarea>
            </div>
            <div>
                <button onclick="show()">显示内容</button>
            </div>
        </body>
    </html>

    内容虽然显示但是没按照预想的一样显示,没有换行。 这是怎么回事?怎么办呢?

    我们看到的那个宽点的空白是空格吗?不是。是textarea的换行符‘ ’ 而不是' '

    知道了换行符是什么,那接下来就好办了,把' '换成<br/>则就显示出换行了。

    注意使用正则替换可以把所有的换行都替换掉

    <!DOCTYPE HTML>
    <html>
        <head>
            <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
            <script type="text/javascript">            
                
                
                function show()
                {
                    var content = $("#content").val();
                    var contentformat = content.replace(/
    /g,'<br/>');
                    $("#p1").html(contentformat);
                }
                
            </script>        
        </head>
        <body>
            <p id="p1"></p>
            <p id="p2"></p>
            <div>
                <textarea id="content"></textarea>
            </div>
            <div>
                <button onclick="show()">显示内容</button>
            </div>
        </body>
    </html>

    方法来源:http://www.cnblogs.com/xrwang/archive/2011/04/27/LineBreakInJavascript.html

                 http://cjzuo-java-gmail-com.iteye.com/blog/1090174

  • 相关阅读:
    Zabbix触发器支持的函数说明
    Zabbix Trigger表达式实例
    Nginx 504 Gateway Time-out问题解决
    题外话:我想立刻辞职,然后闭关学习编程语言,我给自己3个月时间学习C语言!这样行的通吗
    Vim快捷键分类
    [转]运维工作解释
    Cobbler的Web管理和维护
    使用 Cobbler 自动化和管理系统安装
    NTP时间服务器
    自动化部署必备技能—搭建YUM仓库
  • 原文地址:https://www.cnblogs.com/zhouxiuquan/p/3672722.html
Copyright © 2011-2022 走看看