JQ实现单击或双击实现文本变为可编辑状态，焦点移除变为文本

JQ实现单击或双击实现文本变为可编辑状态，焦点移除变为文本

需求：有一段文本，当单击或者双击文本的时候，文本需要变为可编辑的状态，自行编辑结束后，鼠标点击外边，也就是焦点移除，文本自动保存且变为文本的状态；

思路：写个触发事件，获取文本的值，将文本的html替换成输入框，输入框的value值就是获取的文本值，写个blur触发事件，进行ajax后台数据提交，成功后将输入框的html替换成文本值；

代码：

<span id="span_text">我是文本值</span>
<script type="text/javascript">
    $(document).ready(function(){
      
      
        // dblclick是双击事件，单击事件是onclick
        $("#span_text") .dblclick(function(){
      
      
            var span_str = $(this);
            var span_text = span_str.text();
            var input_str = $('<input type="text" value="'+span_text+'" />');
            span_str.html(input_str);
            input_str.blur(function(){
      
      
                var input_val = $(this).val();
                $.post("text_save.php",{
      
      span_text:input_val},function(data){
      
      
                    if(data.code == '200'){
      
      
                        span_str.html(input_val);
                    }
                },'json');
            });
        })
    })
</script>