contenteditable issue with firefox | content editable in HTML5

contenteditable property works fine all the browsers even including IE, however have noticed that we face issue on firefox where we try to select the entire text and try to paste it then it copies the entire tag and it usually happens only with the headings.

One of my colleague faced the similar issue and eventually came out with the fix and would like to share you the same.


This is an editable element. Try pasting something in it - especially if you have some styled text, which would normally be pasted with the attached styles. For example: try copying and pasting one of the links from my yellow footer right into this box.


$('[contenteditable]').on('paste', function (e) {
     var text = (e.originalEvent || e).clipboardData.getData('text/plain')
 || prompt('Paste something..');
    document.execCommand('insertText', false, text);

See output here:click to see working code

I hope this helped.


I Am suresh(suresh kumar )a Web developer,Freelancer,webdesigner,UI developer from bangalore. Got 6+ yrs of IT experience . I specialize in standards-based XHTML, CSS and JavaScript web development. Each site I develop is built to be search engine friendly (SEO), using the latest development principles and techniques.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *