当给一个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. CQRS学习——Storage实现(EF+Code First+DynamicReponsitory)[其四]

    [这里是的实现,指的是针对各个数据访问框架的一个基础实现] 目标 定义仓储/QueryEntry的基本功能 实现仓储的基本功能,以利于复用 实现一些常用的功能 提供一些便利的功能 目标框架 博主使用的 ...

  2. UnitOfWork机制的实现和注意事项

    UnitOfWork机制 /*一点牢骚: * UnitOfWork机制的蛋疼之处: *    UnitOfWork机制,决定了插入新的实体前,要预先设置数据库中的主键Id,尽管数据库自己生产主键. * ...

  3. KafkaSpout: PartitionManager的行为分析

    KafkaSpout的核心逻辑都是由PartitionManager来实现的. 但是这个类实现时候需要考虑的东西有些多,0.92至0.93,至当前(2015.3.14)的master一直在变化.在这里 ...

  4. C++11 生产者消费者

    下面是一个生产者消费者问题,来介绍condition_variable的用法.当线程间的共享数据发生变化的时候,可以通过condition_variable来通知其他的线程.消费者wait 直到生产者 ...

  5. 1058-Tom and Jerry

    描述 Tom和Jerry在10*10的方格中: *...*..... ......*... ...*...*.. .......... ...*.C.... *.....*... ...*...... ...

  6. POJ2187Beauty Contest

    http://poj.org/problem?id=2187 题意 :有一个农场有N个房子,问最远的房子相距多少距离 . 思路 :凸包,旋转卡壳,通过寻找所有的对锺点,找出最远的点对. #includ ...

  7. 2.Adding a Controller

    MVC stands for model-view-controller.  MVC is a pattern for developing applications that are well ar ...

  8. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  9. 使用eclipse远程调试Tomcat的方法

    tomcat是一种非常常见的java web应用服务器,有时候服务器可能并不是部署在本地,而是部署在远程其他的机器上,我们用eclispe该如何进行debug调试呢? 1. 在eclispe中新建we ...

  10. JBoss7 局域网无法访问 解决方法

    JBoss7 局域网无法访问 解决方法 在standalone模式,修改/standalone/configuration/standalone.xml.如下 修改或新增一个interface. &l ...