当给一个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的换行符‘\n’ 而不是'\r\n'

知道了换行符是什么，那接下来就好办了，把'\n'换成<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(/\n/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

Js 与 TextArea的更多相关文章

  1. js操作textarea方法集合

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  2. 使用div模拟textarea，实现文本输入框高度自适应（附：js控制textarea实现文本输入框高度自适应）

    一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...

  3. JS获取TextArea和Input的同步值

    在提交表单时,如果只是表单值,用一个form即可,但有时候需要将整个表单一起提交,则可通过以下js实现. <!DOCTYPE html> <html xmlns="http ...

  4. js限制textarea文本框的文字个数

    现在发微博,那个文本框一般只能输入200字好像,再多就会自动删除,要么是提示字数受限,用Js就可实现本功能.今天带来的这个Js限制表单文本 框文字数量的例子,相信有此方面需要的是个不错的参考.为了便于 ...

  5. js控制textarea输入字符串的个数，鼠标按下抬起推断输入字符数

    [Html代码] <table> <tr> <td width="150">短信内容:</td> <td> <te ...

  6. js实现textarea自适应高度

    html结构: <div class="container" id="container"> <div class="text-wr ...

  7. 通过JS控制textarea的输入长度

    废话不多说,直接上代码(因为自己也只是遇到的时候然后上网查到的解决办法,放在此处只是为了方便各位看以及以后再碰到用起来方便) <ul> <li> <textarea ro ...

  8. 工作记录（JS向textarea添加固定内容、通过固定字符将字符串分割为数组）

    第一个是在 textarea 输入框中添加固定的内容. 代码如下: <textarea id="text" cols="30" rows="10 ...

  9. 【分享】 封装js操作textarea 方法集合(兼容很好)。

    请使用下面的btn操作. 虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下.         在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家 ...

随机推荐

  1. poj 2449 Remmarguts' Date（第K短路问题 Dijkstra+A*）

    http://poj.org/problem?id=2449 Remmarguts' Date Time Limit: 4000MS   Memory Limit: 65536K Total Subm ...

  2. 100 doors

    Question There are 100 doors in a row that are all initially closed. You make 100 passes by the door ...

  3. php如何查找会员无限分类的所有上级和所有下级

    a推广出的a-1,a-2继续推广,得到a-1-1,a-1-2等等数据库设计思路如下:用户表中有一个son这么一个字段,这个字段中存放名下所有会员的id,用分号隔开.这个字段的维护:比如a-1-1推广出 ...

  4. xfire for web-Service

    1.0 XFire XFire是codeHaus组织提供的一个开源框架,它构建了POJO和SOA之间的桥梁,主要特性就是支持将POJO通过非常简单的方式发布成Web服务,这种处理方式不仅充分发挥了PO ...

  5. BZOJ 4146 [AMPPZ2014] Divisors 解题报告

    这个题感觉比较小清新... 我们记录每个数出现的次数 $T_i$. 首先依次枚举每个数字,令 $ans = ans + T_i \times (T_i - 1)$,然后枚举这个数的倍数,令 $ans ...

  6. Matlab中sortrows函数解析

    一.问题来源 返回检索到的数据(按相关度排序)在原始数据中的索引. 二.问题解析 x = [1 4 3 5; 1 3 2 6]:sortrows(x)其结果是按照row来排列,默认首先排第一列,1和1 ...

  7. python的web压力测试工具-pylot安装使用

    http://blog.csdn.net/chenggong2dm/article/details/10106517 pylot是python编写的一款web压力测试工具.使用比较简单.而且测试结果相 ...

  8. SOCI、LiteSQL、POCO数据库访问类库对比

    最近在做视频的开发,其中视频的设备接入管理服务器.流媒体管理服务器.中心服务器都涉及到了数据库的操作,同时需要兼容大多数版本的数据库,包括mysql.sqlite.oracle.公司原来使用的是ado ...

  9. POJ3273Monthly Expense（二分）

    http://poj.org/problem?id=3273 题意: 农夫约翰给出了n天的每天花费 ,让你将这n天分成m组,每组中存在的天数必须是连续的,然后让每组里花费的总和尽量的小,最后将花费最大 ...

  10. 2013 Multi-University Training Contest 4 Who's Aunt Zhang

    看题就知道要用polya,但是当时没做出来,还是不是很熟悉polya!!! 总共有24种置换: 1. 不做任何旋转 K ^ (54 + 12 + 8) 2. 绕相对面中心的轴转 1) 90度 K ^ ...