textarea 换行操作
2016-08-23 16:03
99 查看
在 textarea 中输入回车符,提交表单时,传给后台的是 '\n' 或者 '\r\n'(在IE下,换行符传入\r\n;在Firefox和谷歌浏览器下,换行符只传入了\n)。
楼主也做了一个案例,让 textarea 里的值和 div 里的值相互转换,如图:
html 代码:
在 test1 中输入一个 abc,然后换行再输入 abc,点击第一个提交,在 test2 中显示 test1 的值,不处理的话,结果是'abc abc',换行符在 test1 里显示一个空格符而已,处理办法是:
通过两次替换(处理上面提到的浏览器兼容问题)就能把换行符换成 '<br>'。
然后再把 test2 里的内容显示在第二个 textarea 里,也就是把 '<br>' 再换成 '\r\n' 就行。
'<br\s*\/?\s*>' 表示 br 标签,<br>是HTML写法,<br/>是XHTML1.1的写法,也是XML写法,<br />是XHTML为兼容HTML的写法,也是XML写法。
楼主也做了一个案例,让 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换行与空格相关操作
- js操作textarea换行显示与拆分
- 解决textarea在表格里面的自动换行问题
- textarea中的多行文本(有换行)的内容提交到access数据库中 ,如何读取出来和编辑时一样
- Textarea 换行标志
- 关于<textarea>的内容中换行的表示方法
- 实现TEXTAREA数据写入数据库后提取出来原样显示在网页TABLE上并自动换行
- jQuery替换textarea中的换行
- textarea的高级应用(自动换行 自适应高度 去滚动条)
- 由Flex页面TextArea控件中回车换行引起的问题
- 控制textarea是否自动换行 wrap=[on | off]
- textarea自动换行与自适应高度
- Textarea 操作
- TextArea相关操作
- textarea保留换行的注意事项
- 把textarea中字符串里含有的回车换行替换成<br>的javascript代码
- 文本区Textarea数据后台自动换行的处理方法
- 关于textarea的直观换行的一些研究材料
- 实现TEXTAREA数据写入数据库后提取出来原样显示在网页TABLE上并自动换行
- textarea不需要换行