实现编辑div内容的方法

2021-12-11 13:06:11

122

接到一个要在 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 的浏览器上是失效的！

上一篇：CSS实现水波纹的效果下一篇：jq中serializeArray(

网站建设

Js

实现编辑div内容的方法