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

2016-08-03  本文已影响788人  明年今日Jee

     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/>");

上一篇下一篇

猜你喜欢

热点阅读