CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorerinternet-explorer-8
s1ck
s1ck

Reputation: 27

jQuery contentEditable not working - Internet Explorer 8 - edit table items

I need to get this code working in Internet Explorer 8:

http://jsfiddle.net/tYtQV/5/

$("tbody tr td").bind("click", onClick);

function onClick(e) {
    if(e.currentTarget.contentEditable != null)
    {
            $(e.currentTarget).attr("contentEditable",true);
    }
    else
    {
            $(e.currentTarget).append("<input type='text'>");
    }
}

It works fine in Firefox or Chrome but not in IE8.

I tried changing bind() to live() but that doesnt have any effect - when I click on the list item it just doesnt do anything (the event handler is called, though)

If I change contentEditable to all lowercase "contenteditable" it appends text forms to the element every time it is clicked, which is not what I want.

The purpose of this code is to make table items editable. Any ideas on how to fix this?

Thanks in advance!

Upvotes: 0

Views: 3167

Answers (3)

Vibhav Maheshwari
Vibhav Maheshwari

Reputation: 1

There are many elements in IE, which can't have contenteditable set directly. However, you can wrap the whole table into a content editable div.

 <div contenteditable="true">
     <table>
       ...
    </table>
 </div>

Upvotes: 0

Victoria Powell
Victoria Powell

Reputation: 1

the only problem with adding contenteditable in a div is the placeholder issue because the area will be editable only to that specific region. If you have a placeholder and remove the placeholder to write more, it removes the ability to edit, so make sure to handle that.

Upvotes: 0

Kenneth
Kenneth

Reputation: 28747

TD-elements cannot be set as contenteditable. Check this page for reference: http://msdn.microsoft.com/en-us/library/ms537837(v=vs.85).aspx

You could add an empty div to the cell and make that one contenteditable

Upvotes: 3

Related Questions