Discard to changes WORKING

it has auto focus at end of text. insert the previous value if user leaves the input field empty.

by Kiran Duggal

HTML

<br>
<br>
<br>

<ul class="dashboard nav nav-tabs db-nav-tabs db-nav-tab-icons " id="tabs">
  <li class=" ">
    <a data-toggle="tab" href="#dashboard-content">
      <!-- span class="tab-name">Dashboard-temp</span -->
      <div>
        <label class="addon language_addon_name">
          <input id="tab-name-id-1" class="input-field inputCustomMax valid input-editable" type="text" name="collectionName" value="item 1 name" aria-invalid="false" readonly maxlength="30">
          <span class="call-translation-dialog-box addon-span bootstrap glyphicon glyphicon-text-background glyphiconColor db-add-language-icon" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="" style="display: block; padding:7px; opacity: 1;"></span>
        </label>
      </div>
      <span id="db-edit-name-1" class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both"></span>
      <span class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both"></span>
    </a>
  </li>
  <li class="">
    <a data-toggle="tab" href="#overview-content">
      <!-- span class="tab-name">Dashboard-temp</span -->
      <div>
        <label class="addon language_addon_name ">
          <input id="tab-name-id-2" class="input-field inputCustomMax valid input-editable" type="text" name="collectionName" value="item 2 name" aria-invalid="false" readonly maxlength="30">
          <span class="call-translation-dialog-box addon-span bootstrap glyphicon glyphicon-text-background glyphiconColor db-add-language-icon" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="" style="display: block; padding:7px; opacity: 1;"></span>
        </label>
      </div>
      <span id="db-edit-name-2" class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both"></span>
      <span class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both"></span>
    </a>
  </li>
  <li class="">
    <a data-toggle="tab"...

CSS

input {
  width: 150px;
}

.db-nav-tabs {
  border-bottom: none !important;
  padding-left: 14px !important;
}

.db-nav-tabs li {
  /*    min-width: 150px;
    margin-top: 12px;*/
  background: beige;
  margin: 10px;
  border-radius: 10px;
}

.db-nav-tabs li a .glyphicon {
  /*padding:0 4px 0 8px;*/
  padding: 8px;
}

.db-nav-tabs>li>a {
  color: #959595;
  display: inline-flex !important;
}

.db-nav-tabs>li>a:hover {
  color: #333;
}

.db-nav-tabs li input {
  border: solid 1px transparent;
}


/*

.db-nav-tabs>li>a:focus,
.db-nav-tabs>li.active>a:focus{


background: #ffffff;
outline: none !important;
float: left;

padding-right: 5px !important;
padding-left: 5px !important;
border: none !important;
cursor: pointer !important;
;
}

*/

.db-nav-tabs>li>a,
.db-nav-tabs>li>a:focus,
.db-nav-tabs>li>a:hover {
  float: left;
  padding-right: 5px !important;
  padding-left: 5px !important;
  border: none !important;
  cursor: pointer !important;
  border-radius: 10px;
}

.db-nav-tabs>li.active>a,
.db-nav-tabs>li.active>a:focus,
.db-nav-tabs>li.active>a:hover {
  background: #efefef;
  border: none !important;
}

JavaScript

var currentEditName;
$.fn.setCursorPosition = function (pos) {
    this.each(function (index, elem) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
    return this;
};
$(document).on('click', '.db-edit-tab ', function() {
		discardChanges();
    $('.db-nav-tabs li.name-edit-mode-li').removeClass('name-edit-mode-li');
    $('.input-editable').prop('readonly','true');
    $(this).closest('li').addClass('name-edit-mode-li');
    $(this).addClass("glyphicon-floppy-disk db-save-name").removeClass("glyphicon-edit db-edit-tab");
    $(this).closest('li').find('input').animate({
    	width: '+=30px'
  	});
    $(this).closest('a').find('.input-editable').prop('readonly','').focus().addClass('input-edit-mode');
    
  currentEditName = $('.db-nav-tabs li.name-edit-mode-li').find('.input-edit-mode');
  $(currentEditName).setCursorPosition($(currentEditName).val().length);
  $(currentEditName).data('originalValue', $(currentEditName).val());
 
});

function discardChanges() {
	$(currentEditName).val($(currentEditName).data('originalValue'));
  var alreadyEditMode = ($('.db-nav-tabs').find('.glyphicon-floppy-disk.db-save-name'));
  $(alreadyEditMode).closest('li').find('input').animate({
    width: '-=30px'
  }, 500);
  $('.db-nav-tabs').find('.glyphicon-floppy-disk.db-save-name').addClass('glyphicon-edit db-edit-tab').removeClass('glyphicon-floppy-disk db-save-name');
}

$(document).on('click', '.db-save-name', function() {
  if ($(currentEditName).val() != '') {
    $(currentEditName).data('originalValue', $(currentEditName).val());
  } else {
    $(currentEditName).val($(currentEditName).data('originalValue'));
  }
	$(this).parent('a').find('.input-edit-mode').prop('readonly',...