Edit text directly with click

by Matthew Day

HTML

<div class="wrapper">
  <div id="edit" class="habit noedit">Brush my teeth every week.</div>
  <input id="edit2" class="habit edit" value="Brush my teeth every week."type="text" />
</div>

<div>Editing Mode is: <span id="editMode"></span></div>

CSS

.wrapper {
  height: 50px;  /* to push editMode below .wrapper */
  position: relative;
}

.habit {
  position: absolute;
  padding: 4px 10px;
  top: 0;
  left: 0;
  width: 400px;
}

.noedit {
  background: thistle;
  z-index: 10;
}

.edit {
  background: none;
  border: 1px solid transparent;
  outline: none;
  z-index: 8;
}

.hide {
  display: none;
}

JavaScript

(function($) {

	let app = {
  
  	init: function() {
      app.activateEdit();
      app.deactivateEdit();
      app.showEditMode();
    },
    
    activateEdit: function() {
    	$(document).on('mousedown', '#edit', function(event) {
        event.stopPropagation();
				app.isEditMode = true;
        return app.editToggle(app.isEditMode);
      });
    },
    
    deactivateEdit: function() {
      $(document).on("mousedown", function(event) {
      	event.stopPropagation();
      	if(!$(event.target).closest('#edit2').length) {
					app.isEditMode = false;
          return app.editToggle(app.isEditMode);
        }
      });
    },
    
    editToggle: function(status) {
    	app.showEditMode();
      if (status === true) {
      	$('#edit').addClass('hide');
      } else {
       	$('#edit').removeClass('hide');
      }
    },
    
    isEditMode: false,
    
    showEditMode: function() {
    	$('#editMode').empty().append(app.isEditMode.toString());
    }
    
  }
  
  $(document).ready(function() {
  	app.init();
  })

})(window.jQuery);

// Sources
// Shout out to Art for his answer at https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element which helps us detect a click anywhere on the page except for a specific element (see line 22).