3

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?

codec
  • 7,978
  • 26
  • 71
  • 127
  • Take a look at the addClass jQuery function. – Astaroth Apr 15 '16 at 06:42
  • show the html code where u used input – Akhilesh Singh Apr 15 '16 at 06:45
  • I dont want to use the input tag to add an input box to editspan. I already have the contentEditable=true flag which gives me an input box automatcially. I just want to highlight the contentEditable areaa or force click on edit span. I tried `$('.editspan').click(); ` inside my pencilspan onlick function but it did not work. – codec Apr 15 '16 at 07:06

2 Answers2

1

You should try focus() method :

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

For empty span issue you can follow this link

rajthakur
  • 443
  • 6
  • 16
  • I dont want to use the input tag to add an input box to editspan. I already have the contentEditable=true flag which gives me an input box automatcially. I just want to highlight the contentEditable areaa or force click on edit span. I tried `$('.editspan').click(); ` inside my pencilspan onlick function but it did not work. – codec Apr 15 '16 at 07:06
  • Thanks a lot! This is almost working the only issue is if I dont have any text inside span this doesnt work and if I have anything inside span it works. `text` works but `` does not work – codec Apr 15 '16 at 08:39
  • @lovesoftlayeraj I have added a link in the answer please check it. – rajthakur Apr 15 '16 at 09:00
  • Looks good though there is still a small issue. These span elements are in a table column. All cells in one of the columns has these spans. and I noticed that whichever pencil icon I click it focuses the edtispan in the first row's column only. Any idea why this behaviour? I want that whichever row's pencil icon I click only that row's editspan column must be focussed – codec Apr 15 '16 at 09:08
0

Please try this might help you if you are looking for toggle:

<!DOCTYPE html>
<html>
<head>
<style>
.editInput{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</head>
<body>
<span contentEditable=true class="editspan">
<input type = 'text' value ='' class='editInput' />
</span>
<span class="pencilspan glyphicon glyphicon-pencil pull-right">button</span>
<script>
$(document).ready(function(){
  $(document).on('click', '.pencilspan', function () {
   // var editInput = "<input type = 'text' value ='' />";
    $('.editspan .editInput').toggle();

});
});
</script>
</body>
</html>
Rahul Soni
  • 75
  • 1
  • 5
  • I dont want to use the input tag to add an input box to editspan. I already have the contentEditable=true flag which gives me an input box automatcially. I just want to highlight the contentEditable areaa or force click on edit span. I tried `$('.editspan').click(); ` inside my pencilspan onlick function but it did not work. – codec Apr 15 '16 at 07:06
  • @lovesoftlayeraj: please try this $(document).on('click', '.pencilspan', function () { $('.editspan input').focus(); }); – Rahul Soni Apr 15 '16 at 07:27