lable标签(理解)/文本域标签

Posted 2023-05-06

参考技术A label标签为input元素定义标注（标签）。

作用：用于绑定一个表单元素，当点击lable标签的时候，被绑定的表单元素就会获得输入焦点。

绑定方式一：  用label直接包裹input

<label>用户名：<input type="text" /></label>

绑定方式二：当有多个同属性标签的时候，想定位到某个指定的标签，可以通过for    id的方式来实现

<label for="sex">

    <input type="text" />

    <input type="text" id="sex" />

</label>

文本域

<textarea>请输入留言</textarea>

与input标签的区别是textarea可以自动换行，且可显示的文本区域也更大。一般用于留言板或者发帖/发微博等

效果预览

如何标红文本域的违禁词？

一、问题描述

监听文本域的输入信息，向后端发送请求，后端返回违禁词，前端标红违禁词。

二、问题分析

难点是怎么对文本域的某个文字标红？因为textarea标签里面插入的标签会被识别成普通文字，不会显示预期的样式。

三、解决方案

1、富文本编辑器

<div contenteditable=true>这是一个假文本域<span style="color:red">ddd<span></div>