How to highlight a contentEditable span on glyphicon click

Question

I have 2 spans

<span contentEditable=true class="editspan"></span>
<span class="pencilspan glyphicon glyphicon-pencil pull-right"></span>

and a js function

$(document).on('click', '.pencilspan', function () {
    console.log("clicked pencil");
});

What I want is when I click on pencilspan the contentEditable area of editspan should get highlighted(input box should be visible). How can I achieve this?

Answer 1

You should try focus() method :

$(document).on('click', '.pencilspan', function () {
    $(this).siblings('.editspan').focus();
});

For empty span issue you can follow this link