html⽂本框部分字体变颜⾊，实现⽂本框内，部分字体颜⾊、字
号等⾃定义
前⾔：最近产品提出⼀个新需求，要⽂本框的字体部分改变颜⾊、⼤⼩、换⾏等功能。在了解需求后，⽂本框input发现完全满⾜不了现需求，于是寻求其它解决⽅案。
html内容文本框给定字符串
let text = '这是⼀段正常的⽂字\r\n这是换⾏(这是提⽰的红⾊)\r\n这段⽂字为可编辑状态'
要实现的效果
⽅案⼀
当发现⽂本框满⾜不了需求时，我第⼀感觉时不想⿇烦，虽然把每⼀段内容拆成单独的input标签也可实现但是⼯作量太⼤，太过⿇烦。我的思路是利⽤盒⼦的属性contenteditable直接将内容丢进div。
let text = '这是⼀段正常的⽂字\r\n这是换⾏(这是提⽰的红⾊)\r\n这段⽂字为可编辑状态';
let dom = ElementById('text');
dom.innerHTML= text;
// 当编辑完成后 在取得div的内容就可以了
let resultText = ElementById('text').innerHTML;
console.log(resultText);
但是这样有⼀点满⾜不了，text⽂本中的\r\n识别不了
最终⽅案
既然div识别不了\r\n那就换个能识别的标签，完美解决。
let text = '这是⼀段正常的⽂字\r\n这是换⾏(这是提⽰的红⾊)\r\n这段⽂字为可编辑状态';
let dom = ElementById('text');
dom.innerHTML= text;
/
/ 当编辑完成后 在取得div的内容就可以了
let resultText = ElementById('text').innerHTML;
console.log(resultText);
效果如下
完成任务~
如果有其它最优解，欢迎留⾔指教。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。