div标签改写textarea,实现部分文本内容标红-Toy模板网

这篇具有很好参考价值的文章主要介绍了div标签改写textarea,实现部分文本内容标红。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、标签添加contenteditable属性让文本可编辑

	contenteditable: "inherit";(默认)
	contenteditable: "plaintext-only";(输入纯文本) // 改写textarea可使用
	contenteditable: "true"; // 改写textarea可使用
	contenteditable: "false";
	contenteditable: "caret";(符号)
	contenteditable: "events";

示例

<div contenteditable="true">可编辑区域</div>

2、div获得焦点

div本来是没有focus和blur事件的，正常情况下无法获得焦点，解决方案如下：

<div tabindex="0"></div>

如果用div来模拟一个texarea标签，同时需要它和texarea一样响应focus和blur事件，就需要给他加上attribute：tabindex；
只要元素的tabIndex属性设置成任何有效的整数那么该元素就能取得焦点。元素在取得焦点后就能触发onblur，onfocus，onkeydown, onkeypress和onkeyup事件。

不同tabindex值在tab order（Tabbing navigation）中的情况：

tabIndex值是正数的对象根据递增的值顺序和代码中的位置顺序来被选择
tabIndex值是0的对象根据在代码中的位置顺序被选择
tabIndex值是负数的对象会被忽略

3、添加样式

<div class="textarea" contenteditable="plaintext-only" placeholder="请输入文本内容"></div>

.textarea {
    width: 400px;
    height: 100px;
    padding: 5px;
            
    /*给div添加可以调整控制盒子大小的属性*/
    resize: both;
    overflow: auto;
            
    border: 1px solid #ccc;
           
    display: block;
    box-sizing: border-box;
            
    font-size: 12px;
    outline: none;
}
 /* 输入框为空时显示 placeholder */
 .textarea:empty:before {
	content: attr(placeholder);
	color: #bfbfbf;
 }
 /* 输入框获取焦点时移除 placeholder */
 .textarea:focus:before {
	content: none;
}

div标签改写textarea,实现部分文本内容标红,javascript,前端,html5

4、部分文本颜色标红

<div class="textarea" tabindex="0" contenteditable="plaintext-only" placeholder="请输入文本内容" onblur="handleTextBlur"></div>

handleTextBlur() {
    let val = document.querySelector('.textarea').textContent
    if(val){
        if(val.includes('输入')){
             let newVal = val.replace('输入',`<span style="color:red;">输入</span>`)
             document.querySelector('.textarea').innerHTML = newVal
        }
    }
}