textedit.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://localhost:8080/dojodemo/" />
<title>文本即时编辑</title>
<style type="text/css">
a { color:#333333; text-decoration:none;cursor:pointer;border-bottom: none;}
a:hover { color:#FC5A0A; text-decoration:none;}
a img { border:none;margin:0;padding:0px;}
.share-content {background:#EEEEEE none repeat scroll 0 0;border-bottom:1px solid #CCCCCC;border-top:1px solid #CCCCCC;margin:20px 20px 20px 5.5em;padding-left:10px;}
.inline-edit {display:block; height: 25px;}
.inline-edit-hover{background: #FFFF00 none repeat scroll 0 0; }
</style>
</head>
<body>
<div class="share-content">
<table>
<tbody>
<tr>
<th>
网址:
</th>
<td>
http://www.l99.com
</td>
</tr>
<tr>
<th>
标题:
</th>
<td>
<span class="inline-edit" style="">立方网</span>
<input type="hidden" maxlength="140" value="立方网" name="title" />
</td>
</tr>
<tr>
<th>
标签:
</th>
<td>
<span class="inline-edit">未知 心情</span>
<input type="hidden" value="未知 心情" name="tag" />
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/text.edit.js"></script>
<script>
$("document").ready(function(){
$(".inline-edit").each(function(){
$(this).textEdit(this,"inline-edit-hover","inline-edit","display:inline;height:18px;width:450px;");
});
});
</script>
</body>
</html>
text.edit.js
(function(JQ) { JQ.fn.textEdit = function(id,editClass,startClass,inputStyle) { //监听鼠标经过事件 $(id).mouseover(function(){ $(id).addClass(editClass); }); $(id).mouseout(function(){ $(id).removeClass(editClass); }); $(id).click(function(){ var textarea = $('<input style="' + inputStyle + '" type="text" value="'+$(id).html()+'" ></input>').blur( function(){ var spanValue = $(this).val(); if(spanValue === ''){ return; } if(spanValue.length > 69){ return; } var spanText = $('<span class="' + startClass + '" title="点击可以编辑">' + spanValue + '</span>'); spanText.textEdit(spanText,"inline-edit-hover",startClass,inputStyle); $(this).after(spanText).remove(); spanText.siblings().val(spanValue); }).focus(function(){this.select();}); $(id).after(textarea).remove(); textarea[0].focus(); }); } }(jQuery));