textarea 换行操作

在 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写法。

 

posted @ 2016-08-23 16:03  yu.l  阅读(523)  评论(0编辑  收藏  举报