实现点击之后出现可输入的文本框

如下图实现点击icon，光标定位到Name 的后面实现修改username的功能，再点击失去焦点并保存数据。

 <div class="user_name_edit">
  <span class="user_name_txt space-H1">Name</span> 
     <i class="iconfont icon-edit edit"></i>
 </div>

$('.user_name_edit .edit').on('click',function(){
    
    
   if($('.user_name_txt').find('input').length!=0){
    
    
       $('.user_name_txt').html($('.user_name_txt input').val());
       updateInfo();
   }else{
    
    
       $('.user_name_txt').html("<input type='text' value='"+$('.user_name_txt').text()+"' />");
       var txt = $('.user_name_txt input').val();
       $('.user_name_txt input').val('');
       $('.user_name_txt input').focus().val(txt);
   }   
})