您的位置：首页 > Web前端 > HTML5

html5-contentEditable在线编辑

2016-07-21 17:08 344 查看
contentEditable属性，可用于在线编辑文本，从而简单的实现了用户编辑信息，该属性支持ie，且该属性有个隐藏的inherit（继承）状态，诺当前标签位指定true或者false则由其父级决定，是否为可编辑。

且可以通过

contenteditable="plaintext-only"

属性来控制只输入文本信息

然后该方法只对webkit的内核比较友好，如果是ie就gg了，当然还是能通过js去实现的。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>可编辑列表</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<ul contentEditable="true">
<li id="li">我是第1条</li>
<li>我是第2条</li>
<li>我是第3条</li>
<li>我是第4条</li>
<li>我是第5条</li>
</ul>
<script type="text/javascript">
setInterval(function(){
alert($("#li").text());
},3000);
</script>
</body>
</html>

下方的js用来验证，获取到的信息是否为实时修改的内容。

4000
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html html5
相关文章推荐
新的分享
章节导航