问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

<div contentEditable="true" onclick=""></div>实现placeholder效果？

头像
kjhlafa
    443
    <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标签的时候清空标签内的内容。

    请问这是什么原因呢？

    cssjavascript
    阅读 3.7k
    3 个回答
    得票最新
    头像
    小小小菜鸟
      655
      ✓ 已被采纳
      <!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>
      头像
      幻影菜鸟
        86

        你一个是元素上的onclick事件，一个是js动态绑定事件，不能混用啊！

        头像
        熊丸子
          5.6k
          function handleComment() {
    var e = document.getElementById("comment");
    e.innerHTML = "";
    e.onclick = undefined;
  //e.removeEventListener('click', handleComment, false);
}

          因为removeEventListener只能remove，用addEventListener加上去的事件，直接定义在属性onclick上的handler是无效的。

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题