javascript - <div contentEditable="true" onclick=""></div>实现placeholder效果？
本文介绍了javascript - <div contentEditable="true" onclick=""></div>实现placeholder效果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<div contenteditable="true" id="comment" onclick="handleComment()">Leave a comment</div>
function handleComment() {
var e = document.getElementById("comment");
e.innerHTML = "";
e.removeEventListener('click', handleComment, false);
}问题描述
我这样实现的话，当鼠标聚焦到div标签的时候，确实能将innerHTML清空，但是removeEventListener却无法产生效果。也就是说每次重新聚焦到div标签时候，上次的输入都会清除。
我的目的只是想让第一次聚焦到div标签的时候清空标签内的内容。
请问这是什么原因呢？
解决方案
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.con{
width:300px;
height:100px;
border:1px solid gray;
}
.con:empty:before{
content:attr(placeholder);
font-size: 16px;
color: #999;
}
.con:focus:before{
content:none;
}
</style>
</head>
<body>
<div class="con" contenteditable="true" placeholder="Leave a comment"></div>
<script>
</script>
</body>
</html>这篇关于javascript - <div contentEditable="true" onclick=""></div>实现placeholder效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
