<!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="//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=‘" + 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