`
pengsky2002
  • 浏览: 23195 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

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

 

 

 

  • 大小: 15 KB
分享到:
评论

相关推荐

    jQuery富文本编辑器Notebook.zip

    《jQuery富文本编辑器Notebook:打造优雅的前端创作体验》 在Web开发领域,富文本编辑器扮演着至关重要的角色,它使得用户能够在浏览器端进行类似Word的文本编辑操作,广泛应用于博客、论坛、CMS系统等。jQuery富...

    jquery.editable-select

    `jquery.editable-select` 提供了一个可编辑的文本输入框,与下拉选项列表相结合,使得用户可以即时搜索匹配项,无需滚动长长的列表。 3. **自定义输入**:用户在输入框中输入字符时,插件会实时过滤下拉列表,显示...

    jquery editable plugin--点击编辑文字插件

    这种即时编辑模式使得内容更新更加直观和便捷。 该插件的主要特性包括: 1. **灵活性**:jQuery Editable Plugin支持多种编辑模式,如文本输入框、选择下拉框、日期选择器等,可以满足不同类型的编辑需求。 2. **...

    网页模板——基于jQuery Bootstrap3的文本编辑器特效源码.zip

    该压缩包文件“网页模板——基于jQuery Bootstrap3的文本编辑器特效源码.zip”提供了一个网页模板,这个模板特别设计用于实现基于jQuery和Bootstrap3的文本编辑器特效。jQuery是JavaScript库,它简化了HTML文档遍历...

    前端项目-jquery-spellchecker.zip

    然后,通过调用jQuery选择器和插件方法,可以将拼写检查功能应用于特定的HTML元素,例如`&lt;input&gt;`、`&lt;textarea&gt;`或任何含有可编辑文本的DOM节点。 以下是一个简单的示例,展示如何在页面上启用jQuery Spellchecker...

    jQuery+Bootstarp富文本编辑器插件summernote.js.zip

    《jQuery+Bootstrap富文本编辑器插件:Summernote.js》 在Web开发中,富文本编辑器是一种不可或缺的工具,它允许用户以类似于Word的方式编辑网页内容。jQuery与Bootstrap结合的Summernote.js插件就是一个高效且易用...

    jquery-inputevent:jQuery的跨浏览器oninput事件

    - 富文本编辑器:实时预览编辑内容,如Markdown编辑器。 ### 结语 `jquery-inputevent`插件是JavaScript开发者的有力工具,它简化了跨浏览器事件处理的复杂性,使开发者能专注于应用的业务逻辑,而不是去应对...

    文本编辑器

    jQuery文本编辑器可能采用了现代Web设计原则,如响应式布局、清晰的字体、色彩搭配以及直观的用户界面元素,以确保无论是在桌面还是移动设备上,都能提供优质的编辑体验。同时,简洁的设计也有助于用户专注于内容...

    jQuery-BBCode-Editor:一个即时的 bbcode 编辑器

    这将更新文本框添加按钮,并在侧面显示实时预览,当您键入时,它将实时获取结果并显示它的外观例如,侧面的 [b]bold[/b] 会加粗,这是在实时 div 中完成的,因此您只能看到 #### 粗体 #### 版本的文本什么没有提供...

    Jquery实现可编辑的表格

    本主题将深入探讨如何使用jQuery实现一个可编辑的表格功能,允许用户即时修改表格内的数据并保存更改。 首先,我们需要一个基本的HTML结构来创建表格。表格通常由`&lt;table&gt;`标签定义,`&lt;thead&gt;`包含表头(`&lt;th&gt;`标签...

    一款带预览模式的Bootstrap所见即所得文本编辑器jQuery插件

    Bootstrap Markdown Editor是一款基于jQuery的富文本编辑器,它利用了流行的Bootstrap框架的样式和功能,为用户提供了直观、易用的所见即所得(WYSIWYG)编辑体验。这款编辑器尤其适合那些希望在网页上集成Markdown...

    cometd-jquery的jar

    在Web开发中,实时通信是实现如聊天、股票更新、协作编辑等应用的关键技术。CometD支持多种服务器端和客户端技术,包括Java、JavaScript、JavaScript库如jQuery,以及多种服务器实现,如Jetty、Tomcat等。 jQuery是...

    240多个jQuery UI插件

    - **tEditable - in-place table editing for jQuery**: 在表格中实现就地编辑。 #### 多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc) - **多媒体插件**包括: - **jMedia - accessible multi-media ...

    jQuery-gridmanager:一种使用内置可编辑区域构建行和网格的方法; 需要 jQuery、jQueryUI、Bootstrap 3.x 和可选的 TinyMCE 或 CKEditor

    将富文本编辑器(例如 TinyMCE 和 CKEditor)与这些可编辑区域联系起来 更改布局模式以轻松编辑和预览响应类 如果需要,请使用流体行 创建您自己的自定义控件以轻松扩展功能 安装 请参阅以获取所有+ 现在可以通过...

    jquery前端流程编辑器

    用户只需单击此按钮,即可触发保存操作,流程图数据即时更新到页面底部的文本输入框,提供了一种直观的查看和编辑JSON数据的方式。 5. **自定义与扩展**:由于该编辑器基于jQuery构建,其源代码结构清晰,逻辑相对...

    jQuery+Bootstrap表格内容修改删除编辑插件

    总结来说,这个插件利用jQuery和Bootstrap的强大功能,为用户提供了一个交互性极强的表格,支持内容的即时编辑、删除,并通过Ajax实现了无刷新的数据更新。这对于数据展示和管理类的Web应用来说是一个非常实用的功能...

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    `bootstrap-editable`是Twitter Bootstrap的一个编辑器插件,它提供了一种方便的方式来实现元素的即时编辑。它支持多种类型的输入,如文本、选择框、日期等,其中就包括了下拉框(select)编辑类型。这个功能使得...

    jQuery无刷新实时修改输入框中的文本并保存.rar

    jQuery无刷新实时修改输入框中的文本并保存,可以把input数据在不经过数据读取的情况下及时修改,增强用户体验,确认修改后再上传数据库。 这种功能估计大家以前都见到过的,特别是在一些用户体验比较好的CMS系统...

    jQuery实现的仿ThinkPHP官网在线编辑器效果源码.zip

    1. **富文本编辑**:jQuery的插件可以提供一个类似Word的编辑环境,让用户可以添加粗体、斜体、下划线、列表、段落等格式,同时还能插入图片、链接和表格。 2. **实时预览**:编辑器通常具有实时预览功能,允许用户...

    jQuery插件editable

    3. **多种类型编辑**:该插件支持文本、富文本、数字、日期等多种编辑模式,满足不同场景的需求。 4. **自定义事件**:editable插件允许开发者自定义编辑开始、编辑结束、数据更改等事件的处理逻辑,增强了插件的可...

Global site tag (gtag.js) - Google Analytics