html文本框部分字体变颜色,实现文本框内,部分字体颜色、字号等自定义

前言：最近产品提出一个新需求，要文本框的字体部分改变颜色、大小、换行等功能。在了解需求后，文本框input发现完全满足不了现需求，于是寻求其它解决方案。

给定字符串

let text = '这是一段正常的文字\r\n这是换行(这是提示的红色)\r\n这段文字为可编辑状态'

要实现的效果

方案一

当发现文本框满足不了需求时，我第一感觉时不想麻烦，虽然把每一段内容拆成单独的input标签也可实现但是工作量太大，太过麻烦。我的思路是利用盒子的属性contenteditable直接将内容丢进div。

let text = '这是一段正常的文字\r\n这是换行(这是提示的红色)\r\n这段文字为可编辑状态';

let dom = document.getElementById('text');

dom.innerHTML= text;

// 当编辑完成后 在取得div的内容就可以了

let resultText = document.getElementById('text').innerHTML;

console.log(resultText);

但是这样有一点满足不了，text文本中的\r\n识别不了

最终方案

既然div识别不了\r\n那就换个能识别的标签，完美解决。

let text = '这是一段正常的文字\r\n这是换行(这是提示的红色)\r\n这段文字为可编辑状态';

let dom = document.getElementById('text');

dom.innerHTML= text;

// 当编辑完成后 在取得div的内容就可以了

let resultText = document.getElementById('text').innerHTML;

console.log(resultText);

效果如下

完成任务~

如果有其它最优解，欢迎留言指教。