如下图实现点击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);
}
})