test

by Kanzari Haithem

HTML

<div id="container">
  <span class="rw-editable">File Name</span>
</div>

CSS

#rw-inline-input,
#rw-inline-input:focus{
  background:transparent;
  border:0;
  outline:0;
  float:left;
}
#rw-inline-input-validate{
  background-color:#fefefe;
  color:#dddddd;
  float:left;
  cursor:pointer;
  padding:0 5px;
}

#rw-inline-input-validate:hover{
  color:#000000;
}

JavaScript

$( document ).ready(function() {

	$(document).on("click", ".rw-editable", function() {
  	_currelem = $(this);
    
    if($(this).find('#rw-inline-input').length){
    	
    }else{
    	_currtext = _currelem.text();
      _currelem.empty();
      _input = '<input id="rw-inline-input" type="text" value="'+_currtext+'"><div id="rw-inline-input-validate">ok</div>';
      _currelem.append(_input);
    }
    
  	
  });
  
  $(document).on("click", "#rw-inline-input-validate", function() {
  	
    _newtext= $('#rw-inline-input').val();
    alert(_newtext);
    _editableelem = $(this).parent();
    _editableelem.empty();
    _editableelem.append(_newtext);
    
  });

});