Question

我有一个div，它会动态添加到可竞争的div中；所添加的内容如下所示：

<div><a onclick='my_function()'>HELLO</a></div>

因此，当有人单击HELLO时，将调用my_function。效果很好。

但是我想允许用户从contenteditable div中剪切此元素并将其粘贴到其他位置。

剪切和粘贴在浏览器中可以正常工作，并且所有格式保持一致。但是我在元素内放了onclick属性。所以，当用户粘贴内容时，它看起来像这样：

<div><a>HELLO</a></div>

有没有一种方法可以剪切并粘贴内容，同时保留其html中的所有属性/属性？

我尝试使用jQuery捕获剪切和粘贴事件，如下所示：

$(".editable_div").on('cut', function(event) {
     cut_content = event.currentTarget.innerHTML;
})

$(".editable_div").on('paste', function(event) {
     $(this).append(cut_content)
})

以及其他变体，确保“ cut_content”在全球范围内可用。似乎没有任何作用。

Answer 1

您需要使用preventDefault()

演示：（ctrl + x）

function my_function(){
   console.log('foo');
}

//sample function to add dynamic div
function addDynamicDiv(){
$('#firstDiv').append("<div><a onclick=\'my_function()\'>HELLO</a></div>");
}

$(document).ready(function(){
var cut_content;

$(".editable_div").on('cut', function(event) {
     cut_content = event.currentTarget.innerHTML;
     })
$(".editable_div").on('paste', function(event) {
     event.preventDefault();
     $(this).html(cut_content);
     })
     
$(".editable_div").on('click', function(event) {
    document.execCommand('selectAll',false,null);
});

//execute adding of dynamic div when document is ready
addDynamicDiv();

});

.editable_div{
border: 1px solid black;
height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="firstDiv" class="editable_div" contenteditable="true"></div>
  
  <br><br>
  
  <div class="editable_div" contenteditable="true"></div>
</body>

剪切并粘贴不从HTML元素中获取所有属性的属性

1 个答案: