Question

I am trying to solve a problem about the following code:

<div contenteditable="true">
    <label contenteditable='false'>Tag1</label>
</div>

The problem is when the user copy and paste the label code inside the div it loses the property “contenteditable=’false'”. It means, the second label (copied) is no more contenteditable=false.

Any idea how can i solve this?

I tried the following css code, but it does not allow the user to delete the tag.

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

I also find about Sanitaze, but i think its too much code to solve something like this..

thanks

Answer 1

You can work around this problem by putting the “contenteditable=false” attribute back after a paste:

$(document).bind("input", function(e){
    $(".uneditable").attr("contenteditable", "false");
});​

(This assumes that the label has a class of “uneditable”. I use the “input” event rather than the “paste” event because that takes effect after the paste (rather than before), and it covers some other actions, such as dragging and dropping text.)

jsFiddle: http://jsfiddle.net/DYKbB/3/