Question

我有一个可编辑的主要区域。我希望用户能够创建注释的项目符号层次结构。用户通过按Enter键来创建新段落（此部分有效）。但是，如果他们按“结束”（键代码35），则该段落将成为li元素，并且成为其父元素的子元素。我永远无法触发事件，而且我不知道自己在做错什么。应该应该是这样的：

let m=document.getElementById('textEdit'); //main area
     function mKeyClick(e){
     if (e.keyCode=="13"){ //enterKey
        e.preventDefault();
        let p=document.createElement("p");
        p.addEventListener("keypress",pKeyClick);
        m.appendChild(p);
        //...

    function pKeyClick(e){
    if (e.keyCode=="35"){ //end key
    e.preventDefault();
    let parent=e.target.parentNode;
    let li=document.createElement("li");
    parent.replaceChild(li,e.target);
    e.stopPropagation();
  }
}

应该能够像这样：

说明
- 更多微调的细节

Answer 1

尝试不同的方法-与其向子元素添加新的事件侦听器，不如使用绑定到父textEdit元素的单个处理程序来处理所有事件。

我准备了一个满足您要求的代码段： https://jsfiddle.net/cf0ju28s/

注意：由于我在Mac上并且没有end键，因此我改用tab键。

let textEdit = document.getElementById('textEdit'); //main area

function mKeyClick(e) {
  if (e.keyCode == 13) { //enterKey
    e.preventDefault();

    // create paragraf
    let p = document.createElement("p");
    p.innerHTML = '&nbsp;'; // add content, need to focus later
    textEdit.appendChild(p);

    // select paragraph content - enables you to write in it
    var range = document.createRange();
    var sel = window.getSelection();
    range.selectNode(p);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (e.keyCode == 9) { // tab key
    e.preventDefault();

    // find tag at caret position
    let target = window.getSelection().getRangeAt(0).commonAncestorContainer.parentNode;

    // change p tag to li tag + check that we have actual tag, not root textEdit element
    if (target != textEdit && target.innerHTML != '') {
      let li = document.createElement("li");
      li.innerHTML = target.innerHTML;
      target.parentNode.replaceChild(li, target);
    }
  }
}


textEdit.addEventListener("keydown", mKeyClick);

我的键盘事件快捷键没有启动，我也不知道为什么

1 个答案: