我使用 iFrame 作为文本编辑器，并希望确保正文的第一部分始终是 p 标记。因此，我将其设置为当用户第一次单击正文时它将插入
<p><br></p>
除非用户按住退格按钮，否则这是有效的。一旦用户用完退格键的明文，它就会删除上面的标签。
我已经捕获了退格键事件，但是如何防止用户删除段落标签？
最佳答案
我有 11 个选项(我假设您正在使用 jQuery)。
首先，捕获keydown事件，如果该值等于默认值，则阻止该操作。这可能会位于 iframe 的源 html 内部。
$('#editor').unbind('keydown').bind('keydown', function (event) {
var doPrevent = false;
if (event.keyCode === 8 && $('#editor').html() === '<p><br></p>'){
event.preventDefault();
}
});选项二:只需将可编辑的元素设为 div 即可。
我更喜欢避免使用 iframe。他们让事情变得不必要地复杂(我认为)。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script type="text/javascript">
function DoEdit(){
var idContent = document.getElementById('idContent');
idContent.contentEditable = "true";
//var editor = (idContent.contentWindow || idContent.contentDocument).content.document;
//editor.designMode = "on";
//editor.body.contentEditable = "true";
//editor.contentEditable = "true";
}
function ShowContent(){
var contentValue = "<p><br></p>"+$('#idContent').html();
alert(contentValue)
}
$(document).ready(function(){
DoEdit();
$('#showContentBtn').click(function(){
ShowContent();
});
});
</script>
</head>
<body>
<p><br></p>
<div style="text-align: center;margin:0 auto;width: 500px; height: 300px; border: solid; border-width: 2px;">
<div id="idContent" style="text-align: left; width:100%; height: 100%">
</div>
</div>
<div style="text-align: center;"><input id="showContentBtn" type="button" value="Show Content"></div>
</body>
</html>添加了一个按钮，以防需要获取内容的值并将这些元素保留在其中。
选项3:如果需要在iframe内部，只需将上面的url设置为iframe的src即可。
<html>
<body>
<div style="text-align: center">Edit Frame</div>
<iframe src="/widgets/editor/rich-text" ></iframe>
</body>
</html>
我希望这能给您一些可以在项目中使用的想法。
关于javascript - 防止 iFrame 中的 HTML 退格。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28102172/