正确显示textarea中输入的回车和空格

摘要:
回车消失了,空格变短了。被包围在pre元素中的文本通常会保留空格和换行符。也就是说包含在pre标签中的回车和空格会正常的显示出来。包括你在页面代码中输入的。回车和空格不能正确显示,究其原因是他们各自的表示方式不同。在textarea里面输入的回车是字符"",html中的回车(换行)是""。textarea中输入的空格是空白"",而html中的一个空格是""。

在textarea中输入的文本。如果含有回车或空格。在界面上显示的时候则不那么正常。回车消失了,空格变短了。

如何解决这个问题呢。有2种方法。

1、使用<pre>标签

w3c对pre元素是这样定义的:pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

也就是说包含在pre标签中的回车和空格会正常的显示出来。包括你在页面代码中输入的。所以如果使用pre元素你需要这样写:

<pre>要输出的文本</pre>

而不是这样:

<pre>
      要输出的文本
</pre>

后一种写法 文本前的空白也会被显示的。除非你真的希望这样

2、对文本内容进行替换。

回车和空格不能正确显示,究其原因是他们各自的表示方式不同。在textarea里面输入的回车是字符" ",html中的回车(换行)是"<br/>"。

textarea中输入的空格是空白" ",而html中的一个空格是" "。理所当然不能正确显示。好了现在知道了原因就有了第二种解决方案了。

只要我们将输入的文本中相应的"元素"替换成html认识的就ok了。因此下面一行代码即可解决问题:

"要输出的文本".replaceAll(" ","").replaceAll("","<br/>");

等等。这里还有一点小问题。把一个空格替换成一个""空格看上去仍然要少些。如果你喜欢可以替换成2个。

最后,除了回车和空格以外还有很多空白字符如tab等,如果你喜欢可以一并处理了^_^

最后的最后,如果本来的文本是很长的一行,使用pre标签后就不会自动换行。结果页面出现横向滚动条。不知道有没有好的解决方法?

而将第二种方法处理过的文本放在<p>标签中显示,就可以显示正常。

免责声明:文章转载自《正确显示textarea中输入的回车和空格》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇论文笔记:(2021CVPR)PAConv: Position Adaptive Convolution with Dynamic Kernel Assembling on Point Clouds分布式锁学习一(zookeeper实现)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue-i18n使用ES6语法以及空格换行问题

1.运行报错 报错使用了不恰当的exports Uncaught TypeError : Cannot assign to read only property 'exports ' of object ' # < Object > ' 网上很多教程是写的 //zh.js module.exports={ part1 : {...

textarea聚焦的多种写法

1、textarea标签内容 复制代码代码如下: <span style="font-size:14px;"><tr><td valign="top">备注:</td><td><textarea name="" cols="" rows="" onfocus="this.classNam...

HTML中input参数,多行文本textarea说明,以及获取和设置的方法

input 的所有类型和属性说明 (本文是使用的Jquery实现的) 除了特别说明: 获取和设置属性和样式的值可以统一用: 属性如: name,value,type,id等 获取: $("#text").attr('属性名') 设置: $("#text").attr({属性:"值",属性:"值"}) 获取和设置在css里面的属性:...

实时监听输入框值变化:oninput &amp;amp; onpropertychange

结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。 oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发 使用 ...

实现textarea限制输入字数

实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。 通常的做法就是使用#脚本语言来实现对textar...

DIV Scroll属性

DIV Scroll属性详解,为DIV层打造不同的滚动条。 一、scrollbar属性、样式详解1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll(出现滚动条)、hidden(隐藏)、a...