How To Fix Empty ContentEditable Not Allowing Click



TODO:

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

 

SOLUTION:

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) {
     $(e.target).children('span')[0].focus();
}
 


NOTES:

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



Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading