为文本域（textarea）中的个别字体设置不同的样式

忘是亡心i 2023-10-03 18:37 33阅读 0赞

#### 文章目录 ####

*   *  将textarea文本域用可编辑的div来代替
     *  相关JavaScript代码
     *  效果显示
     *  参考链接

### 将textarea文本域用可编辑的div来代替 ###

将contenteditable设置为true后可将div模拟成textarea

<div id="" class="" contenteditable="true"></div>

然后就可以根据需求改变文本中个别字体的样式了

### 相关JavaScript代码 ###

var arr_correct_split = data_try.correct_result_split;
    		var arr_original_split = data_try.original_text_split;
    		var str_res = "";
            for (var i in arr_correct_split){
        
                // alert("this is "+ i);
                for (var j in arr_correct_split[i]){
        
                    // alert(arr_correct_split[i][j]);
                    if (arr_correct_split[i][j] == arr_original_split[i][j]){
        
                       str_res+=arr_correct_split[i][j];
                     }
                    else {
        
                       str_res+="<span style='background-color: yellow;color: red'>"+arr_correct_split[i][j]+"</span>";
                    }
    }

### 效果显示 ###

![在这里插入图片描述][5ab8150a8a3a43c0851a326b6c5f7d23.png]

### 参考链接 ###

[textarea怎么部分字体变颜色][textarea]

[5ab8150a8a3a43c0851a326b6c5f7d23.png]: https://img-blog.csdnimg.cn/5ab8150a8a3a43c0851a326b6c5f7d23.png
[textarea]: https://jingyan.baidu.com/article/020278112023561bcc9ce589.html

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android TextView设置个别字体样式

印象中的TextView： TextView 就是用于显示文本的控件，可以在布局文件中通过 android:text 属性设置需要现实的字符，或者通过Context对象的fi

秒速五厘米/ 2024年02月17日 17:16/ 0 赞/ 82 阅读

相关为文本域（textarea）中的个别字体设置不同的样式

文章目录将textarea文本域用可编辑的div来代替相关JavaScript代码效果显示参考链接将t

忘是亡心i/ 2023年10月03日 18:37/ 0 赞/ 34 阅读

相关 textarea文本域实时显示输入的字符长度

直接上代码，没什么说的定义的div <div> <textarea name="content" class="layui-textare

古城微笑少年丶/ 2023年06月19日 09:37/ 0 赞/ 48 阅读

相关 CSS中的伪类选择器、颜色、度量单位、文本字体及文本样式设置

1、伪类选择器伪类选择器总汇伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体如下： <table> <thead> <

旧城等待，/ 2023年02月27日 12:28/ 0 赞/ 22 阅读

相关文本域的实例使用——TextArea

TextArea.SCROLLBARS\_HORIZONTAL\_ONLY;//显示水平的滚动条 TextArea.SCROLLBARS\_VERTICAL\_ON

系统管理员/ 2023年02月14日 02:42/ 0 赞/ 17 阅读

相关 ElementUI-textarea文本域高度自适应设置的方法

一、概述 textarea默认情况下，当超出范围后，会在右边显示滑动条 ![b0773135d85317606b5e96db93fd9ee1.png][] 体验不太

àì夳堔傛蜴生んèń/ 2023年01月13日 09:17/ 0 赞/ 385 阅读

相关 html设置字体缩进,css样式设置文本，文本阴影/修饰/字体/缩进。字体类，样式，设置字体，字体变形，引用字体...

/\ 文本类 \/ /\ 文本阴影 / / text-shadow:3px 3px 3px red； \/ /\ 第一个值 X轴偏移量 (加负号为反向) 第一个

男娘i/ 2022年10月07日 09:53/ 0 赞/ 57 阅读

相关在html中怎么设置一行字两个不同样式的字体

Web小结 1.在html中怎么设置一行字两个不同样式的字体 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s

刺骨的言语ヽ痛彻心扉/ 2022年08月28日 07:50/ 0 赞/ 657 阅读

相关 textarea文本域回车切换

// 回车转<br/> function getFormatCode(strValue){ return strValue.replace(/\

缺乏、安全感/ 2022年04月03日 04:48/ 0 赞/ 253 阅读

相关 css 字体文本相关样式

字体设置: font-size:10px; 设置字体大小其中: 自适应大小: font-size:sam

深藏阁楼爱情的钟/ 2021年07月24日 14:44/ 0 赞/ 569 阅读