【特效】点击文字变为可编辑

文字被点击后,可以编辑。

html:

<div class="edit">点击后可编辑的文字</div>

css:

.edit{ 300px; height:40px; line-height:40px; border:1px solid #09F; font-size:20px;}
.edit input{ 300px; height:40px; line-height:40px; border:none; background:none; font-size:20px;}

js:

$(document).ready(function(){
$(".edit").click(function(){
var td=$(this);
var text1=td.text();
var input1=$("<input type='text' value='"+text1+"'/>");
$(this).html(input1);

input1.select();

input1.blur(function(){
var text2=$(this).val();
td.html(text2);
});
});
});

效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/2919.htm
源码下载:http://pan.baidu.com/s/1i5lo5El

原文地址:https://www.cnblogs.com/xiaoxianweb/p/5708051.html