Content Editable

by planxdesign

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <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>

CSS

.input-wrap{
    position: relative;
  }

.heading {
    display: inline-block;
    position: absolute;
    left: 5px;
    height: 51px;
    line-height: 51px;
    z-index: 10;
}

.iconic {
    font-size: 22px;
    margin-right: 5px;
    margin-left: 5px;
    vertical-align: middle;
}

 .input {
    font-size: 16px;
    position: relative;
    background-color: #aaa493;
    height: 51px;
    line-height: 51px;
    vertical-align: middle;
    padding-left: 30%;
    z-index: 1;
  }


.editable {
    background-color: red;
}

JavaScript

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);
       });
  },
        
  editableKeyListener: function($context)
  {
    $('.edit2').on('keydown', function(eve)
       {
         esc = eve.which == 27; // Was the key press ESC?
         nl = eve.which == 13;  // Was the key press ENTER?
                           
         if ( !!nl )
         {
           eve.preventDefault();
           $context.blur();
         }
                           
                           
       });
    }
    
}

user2.editMyDetailsButton();