javascript - 禁用新的 block 引用内容可编辑

Question

如果在可编辑内容上按 Enter 键，则禁用新的 block 引用 JavaScript 或 jQuery

HTML

<div id="demo" contenteditable="true">
   <p>This is a paragraph. Lorem Ipsum...</p>
   <blockquote>This is a blockquote. Enter here</blockquote>
</div>

CSS

blockquote {
    background: beige;
    padding: 10px;
    border: 2px dashed #dadada;
}

片段

blockquote {
    background: beige;
    padding: 10px;
    border: 2px dashed #dadada;
}

<div id="demo" contenteditable="true">
  <p>This is a paragraph. Lorem Ipsum...</p>
  <blockquote>This is a blockquote. Enter here</blockquote>
</div>

Answer 1

答案基于This old so ans. 。对 ans 稍作修改。

$('#demo').keypress(function(e) {
  var key = e.which;
  if (key == 13) // the enter key code
  {
    var input = document.getElementById('demo');

    if (whichTag("blockquote")) {

      document.execCommand('InsertParagraph');
      document.execCommand('Outdent');

    }
  }
});

function whichTag(tagName) {

  var sel, containerNode;
  var tagFound = false;

  tagName = tagName.toUpperCase();

  if (window.getSelection) {

    sel = window.getSelection();

    if (sel.rangeCount > 0) {
      containerNode = sel.getRangeAt(0).commonAncestorContainer;
    }

  } else if ((sel = document.selection) && sel.type != "Control") {

    containerNode = sel.createRange().parentElement();

  }

  while (containerNode) {

    if (containerNode.nodeType == 1 && containerNode.tagName == tagName) {

      tagFound = true;
      containerNode = null;

    } else {

      containerNode = containerNode.parentNode;

    }

  }

  return tagFound;
}

blockquote {
  background: beige;
  padding: 10px;
  border: 2px dashed #dadada;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo" contenteditable="true">
  <p>This is a paragraph. Lorem Ipsum...</p>
  <blockquote>This is a blockquote. Enter here</blockquote>
</div>