div添加contenteditable属性后禁用拖放和粘贴,怎样做?

二月 25, 2018 by · Leave a Comment 

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;
});

——本文最后由傅老师于2018-02-26编辑过

评论


八 − 六 =