javascript - 在 contenteditable 父 div 中的 div 上附加 keydown 事件监听器不起作用？

Question

这是父级 div:

<div
    id="comment"
    placeholder="Your comment"
    class="form-control ellipsesDropdown"
    contenteditable="true"
    @input="CommentChanged($event)"
> <!-- comments are divided into spans and divs with spans containg normal text and divs containing tags -->
    <span>&#8203;</span>
</div>

现在，当用户单击标签时，我将按如下方式创建标签:

const newTag = document.createElement('div');

newTag.setAttribute("tabindex", "-1");
newTag.style.cssText = "background-color: rgba(29,155,209,0.1); color: #1264a3; display: inline-block; font-weight: bold;";

const tagContent = document.createTextNode(`@${p}`); // imagine p is an input argument 

newTag.append(tagContent);

// attach on key down event listener 
newTag.onkeydown = function(event) {
    console.log(event)                
};

// add tag to the comment div
document.getElementById("comment")!.appendChild(newTag);

但是，当我按下标签 div 中的按键时，我什么也没得到，但点击事件确实有效。我看了一下How can I use a 'keydown' event listener on a div?并添加了 tabindex 属性。

我还尝试将事件监听器附加为:

newTag.addEventListener('keydown', function(event) {
   console.log(event);
});

但这仍然不起作用。

知道发生了什么吗？

编辑:根据要求，这里有一个codesandbox链接:https://codesandbox.io/s/blue-bird-tdidr

编辑2:我从我的项目中添加了更多代码，这些代码基本上在一定程度上实现了我想要实现的目标。想想 Twitter/Instagram/Slack，当您在输入帖子时@某人时，可能会出现一些选项来@谁，当您单击某人时，该“标签”就会添加到您的帖子中。在示例中，继续写一些内容，并包含@，您将看到打开的选项列表，单击面包或 toast ，然后看到它成为标签。我正在尝试在标签上添加 on keydown EventListener，所以继续看看它不起作用!

Answer 1

我猜你想创建一个评论功能？但你这样做的方式不是 Vue.js 的方式。这是一个简单的评论框示例:

let el = new Vue({
   el: "#app",
   template: "",
   data(){
      return {
         comment: "",
         comments: []
      }
   },
   methods: {
      addComment(){
         let txt = this.convertTags(this.comment);
         console.log(txt);
         var d = new Date();
         var n = d.toLocaleTimeString();
         this.comments.push({
            commentText: txt,
            time: n
         });
         this.comment = "";
      },
      clickedTag(tag){
       
        console.log(tag);
      },
      convertTags(str){
         let strArr = str.split(" ");
         let mappedArr = strArr.map(el => {
            if(el.includes("@")){
           
               el = `<span onclick='el.clickedTag("${el.replace("@", "")}")' class='tag'>${el}</span>`;
            }
            return " " +el;
         });
         this.template = mappedArr.join("")
         return this.template;
      }
   }
});

#app {
width: 80%;
margin: 0 auto;

}



.comment {
background: #6c5ce7;
width: 100%;
margin: 5px 0;
color: white;
padding: 8px 5px;
}
input {
  margin: 0 auto;
  width: 100%;
   display: block;
   padding: 5px;
}

.tag {
  color: black;
  background: white;
  padding: 2px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="comment in comments" class="comments">
    <div class="comment">
       <p v-html="comment.commentText"></p>
       <small>{{ comment.time }}</small>
    </div>
  </div>
  <input type="text" v-model="comment" @keyup.enter="addComment">
</div>