dynamicEdit

by DanJenkinson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/attrchange/2.0.1/attrchange.min.js"></script>
<div class="c1">
  <input class="dynamicEdit" type="text" value="The Value" />
</div>
<div class="c2">
  <input class="dynamicEdit" type="text" value="Next Value" disabled />
  <br />
  <textarea class="dynamicEdit">some value here</textarea>
</div>

CSS

body {
  background: #ffffff;
  padding: 20px;
  font-family: Helvetica;
}

div.dynamicEdit {
  color: red
}

div.dynamicEdit.disabled {
  color: black
}

.c2 div.dynamicEdit {
  color: blue
}

.c2 div.dynamicEdit.disabled {
  color: grey
}

JavaScript

$(document).ready(function() {
  $(".dynamicEdit").filter(":text,textarea").change(function() {
     $(this).next("div").html($(this).val());
    }).attrchange({
    trackValues: true,
    callback: function(event) {
      if (event.attributeName == "disabled") {
        if (this.disabled) {
          $(this).blur().change().next("div").addClass("disabled");
        } else {
          $(this).next("div").removeClass("disabled");
        }
      }
    }
  }).hide().wrap("<div></div>").after(function() {
    return '<div class="dynamicEdit' + ($(this).is(":disabled") ? " disabled" : "") + '">' + $(this).val() + '</div>';
  }).next("div").click(function() {
    $(this).prev(":text,textarea").filter(":enabled").show().focus().blur(function() {
      $(this).change().hide().next("div").show();
    }).next("div").hide();
  });
  //testing only below
  $(".dynamicEdit").filter(":text,textarea").parent().after('<input type="button" class="toggleDisabled" />').next(".toggleDisabled:button").each(function() {
    $(this).val($(this).prev("div").children(":text,textarea").is(":disabled") ? "Enable" : "Disable").click(function() {
      $(this).prev("div").children(":text,textarea").each(function() {
        this.disabled = this.disabled ? false : true;
      });
      $(this).val($(this).prev("div").children(":text,textarea").is(":disabled") ? "Enable" : "Disable")
    })
  });
  window.setTimeout(function() {
    $(".toggleDisabled:button:last").click();
  }, 10000);
  $(".dynamicEdit").filter(":text,textarea").first().val("Set During onLoad").change();
  window.setTimeout(function() {
    $(".dynamicEdit").filter(":text,textarea").first().val("Set After onLoad").change();
  }, 2000); 
  //end testing
});