首页 > 代码库 > 切换为文本框编辑状态,点击空白区域保存修改

切换为文本框编辑状态,点击空白区域保存修改

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .panel{

            width: 400px;

            margin: 30px 50px;

            height: 300px;

        }

        .title {

            font-size: 14px;

            font-weight: normal;

            height: 55px;

            line-height: 55px;

            padding: 0 20px;

            border-bottom: 1px solid #E1E1E1;

        }

        .title .caname {

            display: inline-block;

            max-width: 358px;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }

        .title .caname input{

            width: 250px;

            margin-top: 10px;

            padding: 6px 11px 6px;

            height: 35px;

            font-size: 14px;

        }

    </style>

</head>

<body>

<h4 style="margin-left: 50px;margin-top: 30px">点击标题文字,切换为文本框编辑状态,点击空白区域保存修改</h4>

<div class="panel panel-default">

    <p><span>我是标题我是标题</span></p>

</div>

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

<script>

    $(function() {

        $(".caname").click(function() {

            var td = $(this);

            var txt = td.text();

            var input = $("<input type=‘text ‘value=http://www.mamicode.com/‘" + txt + "‘/>");

            td.html(input);

            input.click(function() { return false; });

            var t=input.val();

            input.val("").focus().val(t);

            input.blur(function() {

                var newtxt = $(this).val();

                if (newtxt != txt) {

                    td.html(newtxt);

                }

                else

                {

                    td.html(newtxt);

                }

            });

        });

    });

</script>

</body>

</html>

?课工场回馈百万奖学金,为你一次性减免千元学费, 欢迎加入前端/JAVA/PHP学习交流群120342833

切换为文本框编辑状态,点击空白区域保存修改