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

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

html：

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

css：

.edit{ width:300px; height:40px; line-height:40px; border:1px solid #09F; font-size:20px;}
.edit input{ width: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