权威的手机网站制作,小程序商城怎么开通,成都公司网站制作公司,网站上的html内容怎么修改近期产品需求遇到一个问题#xff0c;需要在查询输入框输入内容之后#xff0c;需要 提示由后端返回不匹配文字#xff0c;并且标红
有几种解决方案
1、最简单的方法是在输入框外#xff0c;如它的下面新增 错误提示文字信息#xff0c;最后正则匹配替换高亮错误文字
2…近期产品需求遇到一个问题需要在查询输入框输入内容之后需要 提示由后端返回不匹配文字并且标红
有几种解决方案
1、最简单的方法是在输入框外如它的下面新增 错误提示文字信息最后正则匹配替换高亮错误文字
2、使用富文本的方式需引入第三方富文本组件且需去除无关功能然后在去正则匹配后端返回的文字然后再新增带有style的标签即可
3、使用使用障眼法在textarea上面定位一个div并使用v-html富文本渲染使用pointer-events: none;进行穿透可输入处理且也可以同步到光标的位置个人觉得是比较好的一种方法
实现
templatedivdiv classaddBox clickhideRedel-input classeditInput v-modelcontent :maxLength100 placeholder请输入typetextarea/el-input!-- 高亮遮罩处理 --div classeditDiv textareaClas v-htmlcontentHtml contentEditabletrue v-ifcontentHtml //contentEditable 是为了使其提供光标然后通过点击可以渗透到textarea进行错误的修正/div/divp clickaddRed请求接口/p/div
/templatescript
export default {data() {return {content: ,contentHtml: };},methods: {hideRed() {//这里的话 如果点击该div就会隐藏掉遮罩内容if (this.contentHtml) {this.contentHtml }},addRed() {let text this.content;[哈哈].forEach(item {// 使用 new RegExp() 创建正则表达式并且用变量 item 的值替换里面的占位符 const regex new RegExp(item, g); // 如果 item 可能包含正则表达式特殊字符需要额外转义 text text.replace(regex, span stylecolor:red;${item}/span);});// 需要正对于 符号的 浏览器不会渲染出后面的,如span stylecolor:red;金123/span,span stylecolor:red;外评级AAA/span,评级AAA,这里AAA就不会正常渲染let regex1 /(?!span[^]*)()(?![^]*)/g; this.contentHtml text.replace(regex1, lt;); },}
};
/script
style scoped
.addBox {position: relative;//父.editInput {font-size: 12px;}.editDiv {position: absolute;top: 0px;z-index: 99;background: transparent;}//和textarea样式一样才能无感.textareaClas {pointer-events: none;resize: vertical;height: 65px;padding: 5px 15px;box-sizing: border-box;width: 100%;color: #606266 !important;background-image: none;border: 1px solid #DCDFE6;letter-spacing: normal;word-spacing: normal;line-height: normal;text-transform: none;text-indent: 0px;text-shadow: none;display: block;text-align: start;appearance: auto;-webkit-rtl-ordering: logical;cursor: text;overflow-wrap: break-word;background-color: field;column-count: initial !important;font-size: 12px;border-radius: 4px;font-family: monospace;transition: border-color .2s cubic-bezier(.645, .045, .355, 1);:hover,:focus,:focus-visible {border: 1px solid #40a9ff !important;}}[contenteditable]:focus {outline: none;}}
/style
