时间戳

首页 > 解决方案 > 剪切和粘贴不从 html 元素中获取所有属性/属性

javascript - 剪切和粘贴不从 html 元素中获取所有属性/属性

问题描述

我有一个动态添加到可竞争 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”在全球范围内可用。似乎没有任何效果。

标签： javascriptjqueryhtmlevents

解决方案

你需要使用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>

推荐阅读