div添加contenteditable属性后如何禁用拖放和粘贴操作?

Song1112 次浏览0个评论2023年02月01日

html5中给div(或p)添加contenteditable=”true”之后,这个div就可以编辑了,但是随之而来的问题是拖放、粘贴,导致版面混乱。

<div class="editable" contenteditable="true"></div>

禁用粘贴很容易:

$('.editable').on('paste',function(){
	return false;
});

禁用拖放麻烦一点点:

$('.editable').bind('dragover drop', function(event){
	//prevent drag and drop
    event.preventDefault();
    return false;
});

采用父级或更上层元素代理更好,这样动态加入的元素也不怕拖放了:

$('#parent_id').delegate('.editable', 'dragover drop', function(event){
	//prevent drag and drop
    event.preventDefault();
    return false;
});

提交评论

请登录后评论

用户评论

    当前暂无评价,快来发表您的观点吧...

更多相关好文