textarea内部换行实现

当在使用textarea的时候，有一次需求，需要做到自定义换行，而不是通过textarea定宽来自动换行，其实在html中可以直接通过<br/>来换行，同时也想到用\n来实现换行，其结果是根本不鸟你。

<textarea cols="50" rows="5" id="textareaid">"adfsadfs<br/>fddsadfds \n dfadadf"</textarea>

百度几翻网上确实有说可以用\r\n去实现换行，如果只兼容微软系统的话直接\n即可，但是实验确实不行，后面想到是不是必须通过JS赋值才可以实现，于是出现如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <textarea cols="50" rows="5" id="textareaid">"adfsadfs<br/>fddsadfds \n dfadadf"</textarea>
    <script type="text/javascript">
    document.onclick=function(){
        alert(1);
        var str='5456455d4fgdfgdgdg \n dsfafdadfadfafa';
        document.getElementById("textareaid").value=str;
    }
    </script>
    
</body>
</html>

成功的实现了textarea换行，所以我推断，要想实现textarea换行，必须得动态JS赋值才行。

楼下有大牛@ wangmeijian 给出解决方法，如果不想动态JS赋值就实现换行：可以通过输入HTML实体换行符“&#10;”来实现换行,确实可行，nice!

测试地址

注：百度上有说明要想实现兼容linux,unix,Mac OS,window,可以把\n换成\r\n,但我在苹果系统下用\n也实现了换行，linux,unix系统下没测试，求解

个人知识有限，如有错误的地方还望指正，共同学习共同进步！

posted @ 2015-09-01 10:12  ！win ！  阅读(53556)  评论(19)  编辑  收藏  举报