禁用新的blockquote contenteditable

时间:2017-05-30 09:33:09

标签: javascript jquery contenteditable

如果在COntentent上输入按键可编辑,则禁用新的blockquote 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>

1 个答案:

答案 0 :(得分:3)

Ans基于This old so ans.。对ans进行了略微修改。

&#13;
&#13;
$('#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;
}
&#13;
blockquote {
  background: beige;
  padding: 10px;
  border: 2px dashed #dadada;
}
&#13;
<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>
&#13;
&#13;
&#13;