swappable-field.js

//https://jsfiddle.net/ubgkoghv/
//https://jsfiddle.net/k94d9tL9/1/

var fieldUpdateInProgress = false;
$(".single-value").click(function(){
	if (!fieldUpdateInProgress)
  {
  	fieldUpdateInProgress = true;
    var origCaller = this;
    var origValue = $(origCaller).text();
    $(this).empty().append("<input id=\"value-swap-field\" type=\"text\" value=\"\">");
    $("#value-swap-field").focus();
    $("#value-swap-field").val(origValue);

    $("#value-swap-field").keypress(function(e) {
      if(e.which == 13) {
					//some additional steps will probably have to be taken so you know what this value is
      		//save the value - due your validation/backend call/whatever else here
          var newValue = $(this).val();
          $(origCaller).empty().text(newValue);
					fieldUpdateInProgress = false;
          return false;
      }
    });
  }else
	{
		return false;
	}
});

/*

<span class = "single-value">
Some text
</span>

.single-value
{
    border-bottom: 2px dotted #000;
    text-decoration: none;
    cursor:pointer;
}

.single-value:hover
{
    border-bottom: 2px solid #000;
    text-decoration: none;
}

*/