textarea怎么解析html代码，从而实现一个可高亮的输入框

最新推荐文章于 2025-05-06 09:10:00 发布

weixin_34270865

最新推荐文章于 2025-05-06 09:10:00 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 ui ViewUI

原文链接：http://www.cnblogs.com/XHappyness/p/9390404.html

本文介绍了如何通过在textarea上覆盖一个div，利用JavaScript和Vue实现一个可高亮显示HTML代码的输入框。具体实现包括在Vue组件中引入相关代码，并展示了一种实现高亮显示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

思路：让一个div浮动在textarea上，样式和位置保持完全一致，textarea负责输入，div负责高亮显示

代码：

.vue

<template>
    <div class="highlight-contain">
        <!-- 本组件是带高亮的textarea，需要接受高亮关键词数组来进行高亮 -->
        <div id="highlight-area" class="input-font el-textarea" >
            <div id="fake-textarea" class="el-textarea__inner" v-html="highlightHtml"></div>
        </div>
        <div id="input-area">
            <el-input 
                class="input-font"
                id="input-textarea"
                type="textarea" 
                :placeholder="placeholder" 
                :autosize="autosize" 
                v-model="strValue"
                @input="getHighlightHtml"
                @mousemove.native="setHighlightArea('height',true)"
            ></el-input>
        </div>
    </div>
</template>

<style lang="postcss">
/* 这里是为了让textarea中的文字隐藏，同时这只光标和placeholder颜色 */
#input-area .el-textarea .el-textarea__inner {
     
     
  color: #606266; /* 光标的颜色*/
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0); /* 文本颜色 */
  -webkit-text-fill-color: transparent;
  &::-webkit-input-placeholder {
    color: #dcdfe6;