禁用新的blockquote contenteditable [英] Disable new blockquote contenteditable

问题描述

如果在COntentent上输入按键可编辑
javascript或jQuery

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;
}

代码段

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>

推荐答案

Ans基于这么老了。。略微修改为ans。

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>

这篇关于禁用新的blockquote contenteditable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！