接到一个要在 textarea 输入框中标红部份字体的需求,标红字体就需要使用html标签去实现,但 textarea 中是无法使用标签的,就想到了 textarea 修改为 div 元素并设置可编辑的方法,这样就实现了修改 textarea  部份红包颜色的需求,虽然不是用的 textarea 元素,但是最终的效果是一样的!

DIV 设置可编辑的方法

contenteditable:为html中的一个属性,它可以设置div的内容是否可编辑,如不设置则默认 FALSE,也就是不可编辑!

使用方法

<div contenteditable="true">这里的内容可以被编辑的!</div>

示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:300px;
height: 100px;
font: 14px;
margin: auto auto 10px auto;
border:1px solid #aaa;
outline: none;
padding: 5px;
color: #444;
}
</style>
</head>
<body>
<div>
飞鸟慕鱼博客
</div>
<!--下面这个DIV中的内容是可以被编辑的!-->
<div contenteditable="true">
飞鸟慕鱼博客
</div>
</body>
</html>

示例演示:

 实现可编辑div内容的方法

注意:

HTML 中的 contenteditable 属性为HTML5新增的属性,在一些不支持 HTML5 的浏览器上是失效的!