JQ实现点击文字后变成文本框，修改发送后台保存

最新推荐文章于 2022-10-21 15:58:07 发布

每天都进步一点点

最新推荐文章于 2022-10-21 15:58:07 发布

阅读量5.5k

点赞数

分类专栏： js JQ 文章标签： javascript ajax 前端

本文链接：https://blog.csdn.net/gongqinglin/article/details/121997147

版权

js 同时被 2 个专栏收录

50 篇文章 3 订阅

订阅专栏

37 篇文章 0 订阅

订阅专栏

业务逻辑描述：

1、点击文字变为文本框，并选中文字
2、对文本框内容进行修改
3、点击文本框以外的地方文本框再次变为修改后的文字，如果是删除文字，显示默认提示文字（暂无描述）
4、 AJAX同步更新SQL数据库内容

HTML：

<div class="item-desc" >
	<span class="item-desc-span">{$vo['filename']}文字</span>
	<input type="hidden" name="id" value="{$vo['id']>" />
</div>

JS：

<script type="text/javascript">
    $(function(){
        $(".item-desc-span").click(function(){
            var span_str = $(this);
            var ex_desc_str = span_str.text();
            var input_str = $('<input type="text" class="form-control" name="filename" value="'+ex_desc_str+'" />');
            span_str.html(input_str);
            input_str.click(function() { return false; });
            input_str.trigger("focus");
            input_str.select();
            //input失去焦点时候
            input_str.blur(function(){
                var to_desc = $(this).val();
                var id = $(this).parent().next('input').val();
                $.ajax({
                    type: 'POST',
                    url: "{:url('Asset/editAssetName')}",
                    dataType: 'json',
                    data:{'id': id,'filename':to_desc},
                    success: function(data){
                        if(data.code==200){
                            if(to_desc){
                                span_str.html(to_desc);
                            }else{
                                // span_str.html('暂无描述');
                                span_str.html(ex_desc_str);
                            }
                        }else{
                            span_str.html(ex_desc_str);
                            // alert("后台错误："+data.msg);
                        }
                    },
                    error: function(data){
                        // alert("AJAX错误");
                        ret = false;
                    }
                });
            });
            //按下回车键时候
            input_str.keydown(function(event){
                if(event.keyCode == 13 ) {
                    var to_desc = $(this).val();
                    var id = $(this).parent().next('input').val();
                    $.ajax({
                        type: 'POST',
                        url: "{:url('Asset/editAssetName')}",
                        dataType: 'json',
                        data:{'id': id,'filename':to_desc},
                        success: function(data){
                            if(data.code==200){
                                if(to_desc){
                                    span_str.html(to_desc);
                                }else{
                                    // span_str.html('暂无描述');
                                    span_str.html(ex_desc_str);
                                }
                            }else{
                                span_str.html(ex_desc_str);
                                // alert("后台错误："+data.msg);
                            }
                        },
                        error: function(data){
                            // alert("AJAX错误");
                            ret = false;
                        }
                    });
                }
            });

        });
    });
</script>