Disable new blockquote contenteditable

Question

Disable new blockquote if Enter keypress on COntentent editable javascript or 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;
}

Snippet

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>

Unclear on what you want to achieve. Please explain your question. — Milan Chheda, May 30 '17 at 09:34
Look at this post: https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome — Alex197, May 30 '17 at 09:47

score 4 · Accepted Answer · answered May 30 '17 at 10:08

Ans based on This old so ans.. Slightly modified for 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>

Disable new blockquote contenteditable

1 Answers1

Linked