Question

如何防止用户在编辑过程中至少通过按“ Delete” /“ Backspace”键删除

编辑器中的

？

<html>
<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	<style>
		#editor {
			width: 100%;
			height: 300px;
			border: 1px black solid;
		}
		#dont-remove-me-please{
			width: 100%;
			height: 100px;
			border: 1px red dashed;
		 font-weight: bold;
		 user-select: none;
		}
	</style>
</head>

<body>
	<div id="app"></div>

	<div contenteditable="true" id="editor">
		<div>hey guys!</div>
		<div><strong>more text...</strong></div>
		<section id="dont-remove-me-please" contenteditable="false">DONT' REMOVE ME!!!</section>
		<div><br></div>
	</div>
	<script>
		document.getElementById('editor').focus()
	</script>
</body>

</html>

谢谢。

2 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

Answer 1

要获得预期的结果，请使用下面的单击事件监听器，并根据id添加contenteditable属性

<script>
        document.getElementById('editor').addEventListener('click', function(e) { 
                     if(e.target.id !=="dont-remove-me-please"){
                         e.target.setAttribute("contentEditable", true);
                     }
                  }, false);
    </script>

代码示例-https://codesandbox.io/s/rypy7wkn5m

<html>
<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
	<style>
		#editor {
			width: 100%;
			height: 300px;
			border: 1px black solid;
		}
		#dont-remove-me-please{
			width: 100%;
			height: 100px;
			border: 1px red dashed;
		 font-weight: bold;
		 user-select: none;
		}
	</style>
</head>

<body>

	<div id="app"></div>

	<div id="editor">
		<div>hey guys!</div>
		<div><strong>more text...</strong></div>
		<section id="dont-remove-me-please" contenteditable="false">DONT' REMOVE ME!!!</section>
		<div><br></div>
	</div>
	<script>
		document.getElementById('editor').focus()
	</script>
		<script>
			document.getElementById('editor').addEventListener('click', function(e) { 
						 if(e.target.id !=="dont-remove-me-please"){
							 e.target.setAttribute("contentEditable", true);
						 }
					  }, false);
		</script>
</body>

</html>

Answer 2

您可以将contenteditable=false设置为子级，以防止对其进行编辑。

但是，如果您仍然希望子级是可编辑的，但子级dom元素不应是可移动的，我想您需要收听退格键/删除事件，看看它们如何影响dom并在删除dom节点时撤消更改。试图自己弄清楚

编辑：这就是我所做的

function onpaste(e: ClipboardEvent) {
  e.preventDefault();

  const selection = window.getSelection();
  // Don't allow deleting nodes
  if (selection.anchorNode.isSameNode(selection.focusNode)) {
    // get text representation of clipboard
    const text = e.clipboardData.getData("text/plain");

    // insert text manually, but without new line characters as can't support <br/>s yet
    document.execCommand("insertHTML", false, text.replace(/\n/g, ""));
  }
}

function onkeydownInEditable(e: KeyboardEvent) {
  if (e.key === "Enter") {
    e.preventDefault();
  }
  if (e.key === "Backspace" || e.key === "Delete" || e.key === "Paste") {
    const selection = window.getSelection();
    // Don't allow deleting nodes
    if (!selection.anchorNode.isSameNode(selection.focusNode))
      e.preventDefault();
  }
}

 elementEditing.addEventListener("keydown", onkeydownInEditable);
 elementEditing.addEventListener("paste", onpaste);

如何在编辑时防止从<div contenteditable =“”>中删除“ section”？

2 个答案: