<textarea>显示多出一段空格的原因

     HTML中标签<textarea>内指定输入一段文本,content的字数以及文本框显示行列数可以通过maxlength,rows,cols属性来定义,而在我们提供给浏览器进行显示时,我相信有朋友会发现有时候显示出来的内容会莫名其妙的多出一段空格,导致显示效果不满意。

      其实原因很简单,如果我们使用如下一段代码时:

在浏览器进行显示时,<textarea>……</texterea>之间的文字、换行和空格等都会被当作textarea的值显示。但是,在textarea里面的回车字符是"\r",HTML的回车字符是"<br/>",textarea中输入的空格是空白" ",而html中的一个空格是" &nbsp"。所以会导致浏览器显示如下的异常效果。

此时我们只需消除<textarea>……</textarea>之间多余的空格和换行就可以了


显示效果

除此之外,很多时候textarea content不是我们自己写在HTML代码中的,而是通过后台数据传递到HTML或者js加载到其中,为正常显示textarea content所有的空格,换行,除了上述简单方法之外,我们可以用以下方法实现:

"textarea content".replaceAll(" ","&nbsp").replaceAll("\r","<br/>");

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,608评论 1 19
  • 一、概念(载录于:http://www.cnblogs.com/EricaMIN1987_IT/p/3837436...
    yuantao123434阅读 8,543评论 6 152
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,854评论 1 92
  • 如今举杯祝愿 好人一生平安 ——《好人一生平安》...
    一叶轻雪阅读 4,079评论 15 4
  • 我是两个孩子的妈,而且其中一个还是特殊孩子。不得己而全职八年在家带孩子。那八年,我把所有的心思精力和时间全部用在孩...
    凌云之燕阅读 726评论 2 5