Web前端之textarea文本域标签元素、回车与换行符介绍、禁止事件冒泡、清除、清空、重置、赋值、stopPropagation、querySelector、innerHTML、replace、br-育师

前言

textarea标签本身不识别换行功能，回车换行用的是\n换行符，输入时有换行效果，但是渲染时就只是一个空格。这时就需要利用换行符\n或br标签的转换进行处理。

换行符介绍

表格
序号字符/标签描述
1 
 换行(Line Feed)，也表示\n
2  回车(Carriage Return)，也表示\r
3 \n 换行(Line Feed)，也表示

4 \r 回车(Carriage Return)，也表示
5 br <br>元素在文本中生成一个换行(回车)符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。

与的区别
在不同的操作系统中，换行符的表示方式不一样。在unix系统中，换行符使用\n；在windows系统中换行使用\r\n；在旧版macOS中换行使用回车符\r，在新版macOS中使用与unix系统相同的换行方式。
\n与\r的区别
关于回车(Carriage Return)和换行(Line Feed)这两个概念的来历和区别。
在计算机还没有出现之前，有一种叫做电传打字机(Teletype Model 33)的玩意，每秒钟可以打10个字符。但是它有一个问题，就是打完一行换行的时候，要用去0.2秒，正好可以打两个字符。要是在这0.2秒里面，又有新的字符传过来，那么这个字符将丢失。
于是，研制人员想了个办法解决这个问题，就是在每行后面加两个表示结束的字符。一个叫做回车，告诉打字机把打印头定位在左边界；另一个叫做换行，告诉打字机把纸向下移一行。这就是换行和回车的来历，从它们的英语名字上也可以看出一二。
后来，计算机发明了，这两个概念也就被般到了计算机上。那时，存储器很贵，一些科学家认为在每行结尾加两个字符太浪费了，加一个就可以。于是，就出现了分歧。
Unix系统里，每行结尾只有换行，即\n；Windows系统里面，每行结尾是换行和回车，即\n\r；Mac系统里，每行结尾是回车，一个直接后果是Unix/Mac系统下的文件在Windows里打开的话，所有文字会变成一行；而Windows里的文件在Unix/Mac下打开的话，在每行的结尾可能会多出一个^M符号。
br
<br>可插入一个简单的换行符。
<br>标签是空标签，意味着它没有结束标签，因此这是错误的写法:<br></br>。在XHTML中，把结束标签放在开始标签中，也就是<br>。
注意<br>标签只是简单地开始新的一行，而当浏览器遇到<p>标签时，通常会在相邻的段落之间插入一些垂直的间距。

序号	字符/标签	描述
1	` `	换行(Line Feed)，也表示`\n`
2	` `	回车(Carriage Return)，也表示`\r`
3	`\n`	换行(Line Feed)，也表示` `
4	`\r`	回车(Carriage Return)，也表示` `
5	`br`	`<br>`元素在文本中生成一个换行(回车)符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。

JavaScript

在textarea中输入换行时，换行符是\n
在html页面中显示换行时，使用的是br标签
所以解决这个问题的思路也很简单，就是在前端页面中，将\n转换成br标签即可。
替换可以在数据提交阶段，也可以在数据渲染阶段，此文章使用了渲染阶段的替换方式。
letstr=res.info.replace(/\n/g,'<br>');this.str=str;

Html

经过之前对字符串的处理，最终获取到的数据123<br>456。然后只需要通过vue中的v-html指令或JavaScript中的innerHTML方法将br标签渲染出来即可。
<divv-html="str"></div>
idA.innerHTML=str;

实时获取值

<textareaid="idTextarea"cols="56"rows="6"onclick="onTextarea(event)"ondblclick="onTextarea(event)"></textarea>

// 禁止元素上发生鼠标点击时触发// 禁止元素上发生鼠标双击时触发// 禁止事件冒泡functiononTextarea(event){event.stopPropagation();}// 实时获取输入值idTextarea.oninput=(event)=>{letvalue=event.target.value;value=value.replace(/\n/g,'<br>');textareaVal=value;}

清除值

方法一
document.querySelector('#idTextarea').innerHTML='';
方法二
document.querySelector('#idTextarea').value='';
注解
方法一在我自己的项目中无效，所以使用了方法二。按理来说方法一应该是没啥问题，但是在我自己的项目中有问题了。

赋值

前言
在html中，可以通过JavaScript来给textarea赋值。可以使用value属性或通过DOM操作直接设置textarea的内容。
使用value属性
document.getElementById('idTextarea').value='设置文本内容。';
直接在html中设置默认值
<textarea>默认的文本内容。</textarea>
使用innerHTML或textContent (不推荐)
虽然可以使用innerHTML或textContent来设置textarea的内容，但这不常用，因为textarea的内容通常是通过value属性来操作。
document.getElementById('idTextarea').innerHTML='设置文本内容。';
总结
最推荐的方式是使用value属性来为textarea赋值，这样既简洁又符合标准的操作方式。

replace

w3school
replace方法在字符串中搜索值或正则表达式。
replace方法返回已替换值的新字符串。
replace方法不会更改原始字符串。
如果替换值，则只会替换第一个实例。如需替换所有实例，请使用带有g修饰符集的正则表达式。
MDN
replace方法返回一个由替换值(replacement)替换部分或所有的模式(pattern)匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。