<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.test1{width:400px;min-height:120px;max-height:300px;border:1px solid #000;background:#eee;overflow: hidden;}
.test2{width:400px;min-height:120px;max-height:300px;border:1px solid #000;background:#eee;margin-top:80px;}
.test3{margin-top:40px;background:#eee;}
</style>
</head>
<body>
<!--
关键属性：contenteditable
值为true/false(元素可编辑/不可编辑)
HTML5的新属性
兼容：目前所有主流浏览器都支持，包括IE
-->
<div class="test1" contenteditable="true">contenteditable</div>
<!-- 除了IE上false有效，其他都无效-->
<input type="text" contenteditable="false" class="test3">
<!--
原本是用来规定元素tab键控制次序的，数值越小越靠前触发
几乎所有浏览器都支持这个属性，除了Safari
-->
<div class="test2" tabindex="0">tabindex</div>
</body>
<script>
var test1 = document.querySelector(".test1");
test1.onfocus = function(){
test1.style.background = "#f00";
}
test1.onblur = function(){
test1.style.background = "#333";
}
var test2 = document.querySelector(".test2");
test2.onfocus = function(){
test2.style.background = "#f00";
}
test2.onblur = function(){
test2.style.background = "#333";
}
var test3 = document.querySelector(".test3");
test3.onfocus = function(){
test3.style.background = "#f00";
}
test3.onblur = function(){
test3.style.background = "#333";
}
</script>
</html>
contenteditable还有一个有意思的效果，在网页中按F12打开控制台，在控制台输入contenteditable="true"
结果返回true就可以直接编辑当前网页的内容。
网友评论