1、概述
html 中大部分标签都是不可以编辑的,但是添加了contenteditable
属性之后,标签会变成可编辑状态。
同时可以触发
input事件
输入内容变化时触发focus事件
获取焦点时触发blur事件
失去焦点时触发
2、示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.center{
text-align: center;
}
</style>
</head>
<body>
<h4>为html标签添加contenteditable属性为true,则标签会变成可编辑状态。可用于在线编辑文本</h4>
<div class="center" contenteditable="true" onblur="blurContent(this)" onfocus="focusContent(this)" oninput="getContent(this)">Hellow world!</div>
</body>
<script>
function getContent(that){
console.log('input,内容变化时触发!');
console.log(that.innerHTML);
}
function focusContent(that){
console.log('focus,获得焦点时触发!');
console.log(that.innerHTML);
}
function blurContent(that){
console.log('blur,失去焦点点触发!');
console.log(that.innerHTML);
}
</script>
</html>