How To Fix Empty ContentEditable Not Allowing Click


Have you ever had an empty content editable element, which means the only way to get focus to it was to tab to it?



Enclose your element in a <div class="editableCell">.  Then track the click on the div, setting focus to it's first child, which will be your empty content editable element.  See the JQuery code below.

$(document).on('click', '.editableCell', onClick);

//So we need this because when there is an empty contenteditable element it wont take a click.  So we need to get the parent (TD) then set focus to the SPAN which will allow data entry.
function onClick(e) {


You can change the 'span' to whatever your contenteditable element is.  In my case it was a span.