在 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. dom事件不求甚解,色解事件捕获和冒泡

    以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...

  2. BZOJ2330 糖果题解 查分约束

    BZOJ 2330 糖果题解 差分约束系统 + SPFA 题目传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2330 Description ...

  3. POJ 1244 Slots of Fun(计算几何)

    题目链接 很简单的一题,数据 很小,直接暴力的.但是也是写也好久,有几个数,没算好...一次CE,一次PE,3Y. #include <iostream> #include <cst ...

  4. HDU 1087 简单dp,求递增子序列使和最大

    Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  5. 深入浅出 - Android系统移植与平台开发(九)- JNI介绍

    作者:唐老师,华清远见嵌入式学院讲师. JNI是在学习Android HAL时必须要面临一个知识点,如果你不了解它的机制,不了解它的使用方式,你会被本地代码绕的晕头转向,JNI作为一个中间语言的翻译官 ...

  6. Oracle connect by 树查询之三(超详细)

    查找员工编号为7369的领导: 1 SELECT LEVEL,E.* FROM EMP E CONNECT BY PRIOR E.MGR = E.EMPNO START WITH E.EMPNO = ...

  7. memcached 的安装与使用

    准备条件:下载memcached的服务器端memcached-1.2.1.win32.zip(虽然最新版本已经是1. 4.6了,但win版本的好像还一直未更新,或找不到.) A.windows上的安装 ...

  8. C#中的接口

    C#中的接口(转) 转自:http://www.cnblogs.com/zhenyulu/articles/377705.html 本文中所有图示纯为个人理解(参考了Assembly中元数据的存储方式 ...

  9. 简单实现异步编程promise模式

    本篇文章主要介绍了异步编程promise模式的简单实现,并对每一步进行了分析,需要的朋友可以参考下 异步编程 javascript异步编程, web2.0时代比较热门的编程方式,我们平时码的时候也或多 ...

  10. poi excel导入

    poi.jar包 import java.io.File;import java.io.FileInputStream;import java.io.IOException; import org.a ...