html5 contenteditable how to SelectAll when another element is clicked

Question

I've got a set of divs, that behave a bit like input boxes. When user clicks "edit my details" button, he should be able to edit these boxes. When editing the boxes, I want the current content of the box to be selected when user clicks anywhere on the box. Problem is that label of the box covers part of it and I don't know how to address the actual box, that is below the label to be selected.

Here's a link with simplified version of the problematic code. https://jsfiddle.net/planxdesign/ddptkykf/2/

This is my HTML:

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-10 col-md-offset-1">
      <div class="row">
        <div class="col-sm-4">
          <div class="input-wrap">
            <div class="heading">
              <i class="fa fa-envelope iconic"></i>Home
            </div>
            <div class="edit2 input">12345</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="input-wrap">
            <div class="heading">
              <i class="fa fa-envelope iconic"></i>Home
            </div>
            <div class="edit2 input">12345</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3 col-xs-offset-5 col-sm-2 col-sm-offset-6">
      <button id="edit-user" class="btn btn-default"><i class="fa fa-pencil-square-o icon"></i>Edit My Details</button>
    </div>
  </div>
</div>

My JS:

var user2= {
  editMyDetailsButton: function()
  {
      // Get the edit button
      $('#edit-user').on('click', function(ev)
         {
           ev.preventDefault();
           user2.editables(); // When click, make it editables
          });
  },
  editables: function()
  {
    var $edits = $('.edit2'); // All those with '.edit'
    $edits.each(function()
      {
        $context = $(this);
        user2.editablesStyle($context); // Make them visibly different
        user2.editableClickListeners($context); // Attach click the listeners
        user2.editableKeyListener($context);    // Attach key listener
      });
  },

  editablesStyle: function($context)
  {
    // Set contenteditable=true
    $context.attr('contenteditable', 'true');
    $('.heading').attr('contenteditable', 'false');
      // Add them class editable
      $context.addClass('editable');
  },

  editableClickListeners: function($context)
  {
    $('.input-wrap').on('click', '.edit2, .heading', function( )
       {
          console.log(this);
         // When the editable field is clicked, select all inside
         document.execCommand('selectAll', false, null);
       });
  }

}

user2.editMyDetailsButton();

I found a solution to my problem here – http://stackoverflow.com/a/12244703/1337386 — crs1138, May 13 '15 at 10:18
What is the right way of dealing with the question? Shall I answer it with a link to another StackOverflow thread or shall I just leave it? — crs1138, May 15 '15 at 12:58
The solution is to use a jQuery plugin described in [enter link description here][1] [1]: http://stackoverflow.com/questions/12243898/how-to-select-all-text-in-contenteditable-div/12244703#12244703 — crs1138, May 19 '15 at 23:05

score 0 · Answer 1 · answered May 13 '15 at 07:30

0

I think you should remove the heading class in this click function:

editableClickListeners: function($context)
  {
    $('.input-wrap').on('click', '.edit2', function() // remove heading class here
       {
          console.log(this);
         // When the editable field is clicked, select all inside
         document.execCommand('selectAll', false, null);
       });
  }

DEMO

answered May 13 '15 at 07:30

Brijesh Bhatt

3,810
3
18
34

Thanks for your quick answer. It makes no difference, when I click on the _div.heading_, the text in _div.edit2.input_ doesn't get selected, which is the behaviour, I'm after. – crs1138 May 13 '15 at 09:23

html5 contenteditable how to SelectAll when another element is clicked

1 Answers1