在 textarea 中输入回车符,提交表单时,传给后台的是 '\n' 或者 '\r\n'(在IE下,换行符传入\r\n;在Firefox和谷歌浏览器下,换行符只传入了\n)。

楼主也做了一个案例,让 textarea 里的值和 div 里的值相互转换,如图:

html 代码:

<textarea id="test1"></textarea>
<input type="button" id="submit1" value="提交">
<div id="test2"></div>
<input type="button" id="submit2" value="提交">
<textarea id="test3"></textarea>

在 test1 中输入一个 abc,然后换行再输入 abc,点击第一个提交,在 test2 中显示 test1 的值,不处理的话,结果是'abc abc',换行符在 test1 里显示一个空格符而已,处理办法是:

$('#submit1').on('click', function () {
var text = $('#test1').val();
$('#test2').html(text.replace(/\r/ig, "").replace(/\n/ig, "<br>"));
})

通过两次替换(处理上面提到的浏览器兼容问题)就能把换行符换成 '<br>'。

然后再把 test2 里的内容显示在第二个 textarea 里,也就是把 '<br>' 再换成 '\r\n' 就行。

$('#submit2').on('click', function () {
var text = $('#test2').html();
$('#test3').val(text.replace(/<br\s*\/?\s*>/ig, '\r\n'));
})

'<br\s*\/?\s*>' 表示 br 标签,<br>是HTML写法,<br/>是XHTML1.1的写法,也是XML写法,<br />是XHTML为兼容HTML的写法,也是XML写法。

textarea 换行操作的更多相关文章

  1. html,js简单保存textarea换行格式

    有时候我们在做表单提交时,往往需要把html标签保存起来,但是textarea不保存换行的信息,所以我们需要用js来实现保存textarea的换行等HTM标签.真正让HTML文本框里的换换等格式保留下 ...

  2. delphi 换行操作 Word

    delphi 换行操作 我将我的商用<旅行社管理系统>的 发团通知 部分奉献给您,望对您有所帮助. procedure TFrmMain.N327Click(Sender: TObject ...

  3. Jquery - Select 和 Checkbox 、Textarea的操作

    Checkbox //判断是否选中 if ($(this).is(':checked')) { alert("它处于选中状态"); } else { alert("它不处 ...

  4. Mysql中交换行操作

    博客已搬家,更多内容查看https://liangyongrui.github.io/ Mysql中交换行操作 leetcode的一道题目 参考:https://leetcode.com/proble ...

  5. textarea标签换行符以br存入数据库 ,br转 textArea换行符

    textArea换行符转 <br/> textarea标签回车符是/n,在html里识别回车是<br/>,在存入数据库之前要进行转换成<br/>,在取出展示在htm ...

  6. textarea换行符转换

    /** * @description textarea换行符转指定字符 * @param str:要放到textarea的字符串 * @param code:要转换成换行的字符,默认为',' */ e ...

  7. ASP.NET 导出gridview中的数据到Excel表中,并对指定单元格换行操作

    1. 使用NPOI读取及生成excel表. (1)导出Click事件: 获取DataTable; 给文件加文件名: string xlsxName = "xxx_" + DateT ...

  8. 【原】textarea 换行之间的转换

    在操纵表单的时候,如果你在textarea输入的内容是换行的,如果没有进行相应的装换,你输出的内容是不会跟着一起换行的.如果后台返回给你的数据是带有<br />换行符的, 那么在texta ...

  9. HTML里面Textarea换行总结

    近期碰到一个数据转来转去转到Textrea里面能否真正按行存放的问题,在这里总结一下:   问题描写叙述: 比方get数据到一个TextArea里面,如“AAA BBB”,想把这段文字在TextAre ...

随机推荐

  1. [BZOJ1072][SCOI2007] 排列prem

    Description 给一个数字串s和正整数d, 统计s有多少种不同的排列能被d整除(可以有前导0).例如123434有90种排列能被2整除,其中末位为2的有30种,末位为4的有60种. Input ...

  2. 设置 tableview 的背景颜色,总是不生效

    1.只设置了背景图片,却忘记了取消掉 cell 的背景颜色(可以通过层次结构来观察) UIImageView *bgView = [[UIImageView alloc]initWithFrame:s ...

  3. php 实现推技术comet(转)

    实现实时通信一般有两种方式:socket或comet.socket是比较好的解决方案,问题在于不是所有的浏览器都兼容,服务器端实现起来也稍微有点麻烦.相比之下,comet(基于HTTP长连接的&quo ...

  4. VS2010 C++环境下DLL和LIB文件目录及名称修改

    VS2010 C++环境下DLL和LIB文件目录及名称修改 转自:http://blog.csdn.net/archielau/article/details/8507581 DLL工程,Debug版 ...

  5. 【Go语言】集合与文件操作

    本文目录 1.数据集合的主要操作 1_1.字典的声明 1_2.字典的初始化和创建 1_3.字典的访问和操作 1_4.其他类型的数据集 2.文件操作 2_1.文件操作概述os包和path包 2_2.文件 ...

  6. 字典的快速赋值 setValuesForKeysWithDictionary

    字典的快速赋值 setValuesForKeysWithDictionary ​ 前言 在学习解析数据的时候,我们经常是这么写的:PersonModel.h文件中    @property (nona ...

  7. Maya 脚本控制物体自转

    在Maya中,我们可以用脚本来控制物体的自转方向,速度等等,步骤如下: 选择需要操作的物体object,打开通道盒Channel Box,点击编辑Edit,打开表达式Expressions面板 选择需 ...

  8. LeetCode 刷题顺序表

    Id Question Difficulty Frequency Data Structures Algorithms 1 Two Sum 2 5 array + set sort + two poi ...

  9. sql*loader的直接加载方式和传统加载方式的性能差异

    1.确认数据库版本 2.数据准备 3.创建导入表及控制文件 4.直接加载方式演示 查看具体的日志: 5.传统加载方式演示 查看日志文件: 6.结论及两种方式的差异 经过比对direct比convent ...

  10. Linux常用命令(持续更新)

    lsb_release -a 查看linux操作系统信息 getconf LONG_BIT 查看linux操作系统位数 useradd [-g groupname] username 创建用户,并指定 ...