前端文本框插入标签（错误新增红色错误文字）

本文主要是介绍前端文本框插入标签（错误新增红色错误文字），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

近期产品需求遇到一个问题，需要在查询输入框输入内容之后，需要 提示由后端返回不匹配文字，并且标红

有几种解决方案

1、最简单的方法是在输入框外，如它的下面新增 错误提示文字信息，最后正则匹配替换高亮错误文字

2、使用富文本的方式，需引入第三方富文本组件且需去除无关功能，然后在去正则匹配后端返回的文字，然后再新增带有style的标签即可，

3、使用使用障眼法，在textarea上面定位一个div并使用v-html富文本渲染，使用pointer-events: none;进行穿透可输入处理，且也可以同步到光标的位置，个人觉得是比较好的一种方法

实现：

<template><div><div class="addBox"  @click="hideRed"><el-input class="editInput" v-model="content" :maxLength="100" placeholder="请输入"type="textarea"></el-input><!-- 高亮遮罩处理 --><div class="editDiv textareaClas" v-html="contentHtml" contentEditable="true" v-if&#

这篇关于前端文本框插入标签（错误新增红色错误文字）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---