JQuery-文本即时编辑

最新推荐文章于 2024-07-28 02:28:50 发布

最新推荐文章于 2024-07-28 02:28:50 发布 · 194 阅读

文章标签：

#jQuery #JavaScript #CSS #HTML #JSP #ViewUI

本文介绍了一个使用Java和jQuery实现的简单文本即时编辑器。该编辑器允许用户直接在页面上编辑文本内容，并实时保存到隐藏的输入框中。通过鼠标悬停效果增强用户体验。

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));