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

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

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbYAAABiCAIAAACzs2GqAAAFZ0lEQVR4nO3azYrTahzA4d5RryhXIQ6KguCuGwVduJNxJczhQGBAxEEUdeW6u7NQHDjqpOl0PkB3nkWcNmnzb5tOMiOnz0MQ56NvkrfJr0k7vdu3b/8CoE5PIgEiEgkQkkiAUH0iP33+cvD63V9/71ssFsv/ezl4/e7T5y/NEvnl8Oj7aNJmigGuxM+fPw8PD79+/Zrn+XHJZDIp/p06OTk5PT09Ojr659O/0WhhIrvcBYCuSCRASCIBQhL55xoO+kl63RvxZzElXLUrT+Rw0O/1+oPhcNDv9XpNjvc0WXhAmvQu9AfD9Ye6ovFrRmz06LXXuXQ7o6243NYtHWej7Vl3bZd/plduz0bPe9P9Wm+9m58vtON6EpmkxeHQ9GhPk8oxMvfl5bUz/nDQn+7ZxptYvV4qD7lo5UqiX2hrApvO22XW28WFZFvHVdMHrrHeS50vtCBKZJ7nWZbled76jXaaFM/0cNDvzUWg9oV7+sraHwxnx1Dp13u9ysvr7Cf9JJmdTV2PX/5h6ZtpkqSzR8x+UKx1enWwcPDXXCzVXqXE21m/X/H3u563hutdYnFuiqkZXIy0Vkkabn/DeWh13urOF65KbSJHo1GWZXfu3ClXsq1EDgf9i6e8fOwM0/Tii9IpUP6lxUTUveqWvpcm5UO84/GDhFW+ObfLxclS/DBNyw8Mr5Tqb7cWtzPar3h/u5235utdpm56Sg9e4zqz+fPedB7aOt6i84WrspjIoo83bty4d+/eo0ePppXs+OOaysvo7I2YpHxUzB/7tYdU8D5Sp+OnSXTtMnfFU1lh+LbainO89lJ17jfq92vZ/nY5bxusd6maCapeKK8YaYPnvek8tHa8cc3mEln08ebNm4PB4NmzZ3t7e8+fPy8q2WkiKwfL7EC65CGVJrUXFh2M//urus8mmidy6Rled7/VSiIr47U8b43Xu9LCHHWbyKbz0M3xxnWYS2SWZQ8fPtzd3d3f3z84OHj79u2HDx/evHmTZVmniazei/TKX1SvN1YdUpWzY3bKdT1+aYRqJ6tvslfP3fozOb6EDD/UXHFKR/eg5f3teN6arne1ZXlZ/al30+1vOg+tHW9cu9qryEVdX0WW70uKt90rf/RwcbsymL59U7o9W7zlrblx63r8klknf7/bNHtM/TCVgcJuRnUMBgr2a6397WDemq53DaWZuhglSav/X6Lh9jedh9bmjevmT8f/KP40ugGTxRWQSICQRAKEJBIgJJEAIYkECEkkQEgiAUISCRCSSICQRAKEJBIgJJEAIYkECEkkQEgiAUISCRCSSICQRAKEJBIgJJEAIYkECEkkQEgiAUISCRCSSICQRAKEJBIgJJEAIYkECEkkQEgiAUISCRCSSICQRAKEJBIgJJEAIYkECEkkQEgiAUISCRCSSICQRAKEJBIgJJEAIYkECEkkQEgiAUISCRCSSICQRAKEJBIgJJEAIYkECEkkQEgiAUISCRCaS+RoNMrq5HkukcDWmUtklmV3797d2dnZ2dm5devW/fv3nzx5sre3l2WZRAJbp/Yq8sGDB48fP97d3X3x4sX79+9dRQJbavG9yKKST58+ffny5cePH4s+ei8S2EZFIr99+zYej6efzOR5nmXZq1evpn2USGAbFYnMsuz4+PikZDwej0aj8Xg8/c7p6enZ2ZlEAlukSGSRwtOlzs7OJBLYLkUiJ5PJYhCnWSyTSGCLFIlcrOH5+Xnx7xyJBLZIkcjFFEY2TOT30aTLvQDoRJHIoyYaJ/L8/Mfh92OLxWLZhuX8/EezRALwSyIBlpBIgJBEAoQkEiAkkQAhiQQISSRASCIBQhIJEJJIgJBEAoT+A53T8W/PNPOxAAAAAElFTkSuQmCC" alt="" />

百度几翻网上确实有说可以用\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>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbcAAABsCAIAAABme2vkAAAFiklEQVR4nO3dT2sTeRjA8byjvpw95VWIVVAQvOWioAvepJ7EngKCK3poQZcFPZpF2OMKVjuZtE099NY9jKaTZObJTJxps87nwyCY/PpMPOTL5E9/9s4BKNe76gcAsNFUEiCikgARlQSIqCRARCUBIr3z8/P9jwc3nr3/7fc9h8Ph+LWPG8/e7388qF3JP/9JP3yethJhgDadnZ19+vTp4OAgTdOjnOPj4+zPmZOTk+l0enh4+Mffh7VO8b2S7Tx+gHapJEBEJQEiKgkQuZJKDvu9mf5wcf2w3+ttDUZV148GW9k98z9TZ078eH4sWLxnef7CrOU7yxTMb2pOo+uhi66okuXPzGF/azAc9BfqVrZ+2C97lteZEz2esjVF8yuOqjK/qTmNr4fOKatkmqZJkqRpeqmVHA22tgaj81HlupVcZtWeU3b7xdXc3JrC+bOL2qWr0tk9/eHc1Vvx/KbmNLceOq2wkuPxOEmSW7du5UPZzivufOaG/e/Py+W6Fa4fDfqDwY+7cs/ounOKb/9ewosFszOUzj8vDO5seVahH0PL5zc0p6H10HXLlcwSee3atTt37jx48GAWynY+vbl4as69O1h6IZNbP/ccHw221p5TePtCAavOX67b3AXvRaLK5zc0p6H10HkLlcwSef369cFg8OTJk93d3adPn2ahbOkz7qJXuwXXaEXrh/25S7/ln6k4p/D2FRUrm7+ibhd/+7lKVpjT0HrovIVKJkly//79nZ2d58+fv379en9//+3bt3t7e0mSNFbJfNyKr1nmn8nB+txzeXVty+aU3D7XreJPiaq+4s6P71Wb38CchtZD1xVeSy5r+Fry4kVr+Rd7ir+qU/R1nOU3GuvOKb499zHKVvYG6PwHOAs/sfBKPPeAcuP7/fzlb+H8puY0th66zbfKL1XhC/dLmNP2eviFqeQlyF28/VR76s5pez10gkoCRFQSIKKSABGVBIioJEBkMytZY6+FujuMhesb2HnsqnZOW+u8wGqbWcnzyjt6Nb5R2E8OvKqd02yABm3ZqEqu3NGrt9Xvz77uXLrD2NzvllTZ2azkvCVzau941vKc+ucFaticSkY7lc39FuDKa67RcDia3b3Qh+X15ectnlN7x7OW56y3HqhqYyoZ7ZETvOdWvMlF7uJqVU2C8xbOqb2XT8tz1lwPVPW/qGTO4r6QhdeG+dfq/XUrWTKndt1anrPmeqCqjalkpR29qlQy3gBsRU1y5y2bU3fHs7bnrLceqGpzKlltJ7HCfcTm78nv2TDI/d8EpTuSlZy3bE7dHc/anlP7vEAdm1RJgM2jkgARlQSIqCRARCUBIioJEFFJgIhKAkRUEiCikgARlQSIqCRARCUBIioJEFFJgIhKAkRUEiCikgARlQSIqCRARCUBIioJEFFJgIhKAkRUEiCikgARlQSIqCRARCUBIioJEFFJgIhKAkRUEiCikgARlQSIqCRARCUBIioJEFFJgIhKAkRUEiCikgCRhUqOx+OkSJqmKgl00UIlkyS5ffv29vb29vb2zZs37969++jRo93d3SRJVBLoosJryXv37j18+HBnZ+fFixdv3rxxLQl01/L7klkoHz9+/PLly3fv3mWJ9L4k0FFZJb98+TKZTGYf1KRpmiTJq1evZolUSaCjskomSXJ0dHSSM5lMxuPxZDKZ3TKdTk9PT1US6JasklkNp6HT01OVBDonq+Tx8fFyE2dlzFNJoFuySi4H8du3b9mfC1QS6Jaskss1LLN+JT98nrbzTwBoUVbJwzrWqeTXk7O//j1xOByOLhxfT85qVxKAMioJEFFJgIhKAkRUEiCikgARlQSIqCRARCUBIioJEFFJgIhKAkRUEiCikgARlQSIqCRARCUBIioJEFFJgMh/nEhyOzKfPoUAAAAASUVORK5CYII=" alt="" />

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

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

测试地址

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

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

textarea内部换行实现的更多相关文章

  1. angularjs中类似textarea的换行、空格处理

    背景 今天测试人员测试出来一个显示数据的页面,没有换行. 原因剖析 这个页面是从一个<textarea>的页面拿到的数据,存到数据库中后再返回来的. 1. 知道这点之后,就有了调查方向了: ...

  2. html5 textarea 写入换行的方法

    html5 textarea 写入换行的方法<pre> <textarea id="fwe" class="selmiao" cols=&qu ...

  3. 关于textarea中换行、回车、空格的识别与处理

    需求:在textarea中输入文字,提交给后台后,后台输出在另一个页面,文字按原格式显示.   问题:如何还原输入框中的换行和空格? 兼容性:IE9以上.FF.chrome在换行处匹配/\n/     ...

  4. html textarea 获取换行

    1.需求: 获取textarea中的换行符,存到数据库中,并在取出时显示出换行操作 2.实践 2.1 发现可以取到换行符 "/n" ,并且可以存储到MySQL数据库中,并不需要特殊 ...

  5. textarea文本换行和页面显示换行符

    在textarea里写的文本有换行,但是显示到页面后就不会自动换行,通过对数据分析发现textarea里的换行符是\n\r,然而HTML中的换行为<\br>解决办法有两种: 第一种:把文本 ...

  6. textarea 带换行符保存数据与带换行符展示数据

    毕业设计进行ing~ 最近要想要实现一个站内邮箱,想要带换行地输出邮件主体内容. 这两天为了解决这个问题百度了好多东西,发现相关问题有很多记录,可能这确实是大多数初学者也碰到的问题.自己找了好多地方都 ...

  7. js实现把textarea通过换行或者回车把多行数字分割成数组，并且去掉数组中空的值。

    删除数组指定的某个元素 var msg = " ";  //textarea  文本框输入的内容 var emp = [ ];   //定义一个数组,用来存msg分割好的内容 1. ...

  8. textarea使换行变顿号

    window.onload = function(){ document.getElementById('area').addEventListener('keydown',function(e){ ...

  9. textarea 是否换行的问题解决

    需求:判断当前textarea是否已经换行(这个换行有2种方式:1.不断输入文字直到超过指定宽度后自动换行:2.按了回车以后进行换行) 单纯的解决第二种换行很简单.网上提供了很多常规的解决方案. De ...

随机推荐

  1. (十一) 一起学 Unix 环境高级编程 (APUE) 之 高级 IO

    . . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...

  2. CK13物料价格评估的数据ALV显示

    *&---------------------------------------------------------------------* *& Report  ZPP023 * ...

  3. AngularJs自定义指令详解（2） - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  4. 深入理解C语言的函数调用过程

    本文主要从进程栈空间的层面复习一下C语言中函数调用的具体过程,以加深对一些基础知识的理解.     先看一个最简单的程序: 点击(此处)折叠或打开 /*test.c*/ #include stdio. ...

  5. JAVA -Xms -Xmx -XX:PermSize -XX:MaxPermSize 区别

    java  -Xms -Xmx -XX:PermSize -XX:MaxPermSize     在做java开发时尤其是大型软件开发时经常会遇到内存溢出的问题,比如说OutOfMemoryError ...

  6. FreeBSD_11-系统管理——{Part_4 - 内核参数定制}

    特别提醒:自行定制的内核,必須经过全方位测试无誤后,方能用于生产环境 基于:/usr/src/sys/amd64/conf/GENERIC cpu HAMMER ident TEST_kernel # ...

  7. B. Factory Repairs--cf627B(线段树)

    http://codeforces.com/problemset/problem/627/B 题目大意:  n代表天数 ,k代表每一次维修持续的天数,a代表维修过后每天能生产a件产品,b代表维修之前每 ...

  8. 1、iOS9 HTTP 不能正常使用的解决办法

    升级Xcode7.0 bata发现网络请求访问失败 输出的错误信息: The resource could not be loaded because the App Transport Securi ...

  9. Java截图笔记

  10. jsp_数据库的连接

    一.添加数据库以及表 在这里我们使用的是mysql数据库 二.配置数据库的驱动程序 将mysql的驱动程序复制到Tomcat目录下的lib目录中 注:在Tomcat中如果配置了新的jar包,则配置完成 ...