`
wurushuang
  • 浏览: 38815 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascriptpu实现点击出现编辑文本框

CSSXHTMLXMLHTML 
阅读更多 
<?xml version="1.0" encoding="ISO-8859-1"?>
	
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title> New Document </title>

		<meta name="title" content="" />
		<meta name="author" content="0xs.cn" />
		<meta name="subject" content="" />
		<meta name="language" content="zh-cn" />
		<meta name="keywords" content="" />

		<style type="text/css" >
			/* default css rule */
			body { font: 12px "Verdana, 宋体"; }
		</style>

		<script type="text/javascript" >
			// shortcut
			function $(s){
				return typeof s == 'object'?s:document.getElementById(s);
			}

			var dEdit = function(el){
				var me = this;

				this.save = function (txt){
					el.innerHTML = txt;
				};
				
				this.edit = function (e){
					var e = e || event;
					var target = e.target || e.srcElement;
					if(target.tagName.toLowerCase() == 'input'){
						return;
					}
					var ipt = document.createElement('input');
					ipt.value = target.innerHTML;
					ipt.onkeydown = function(){
						if((arguments[0]||event).keyCode==13){
							me.save(this.value);
						}
					};
					ipt.onblur = function(){
						me.save(this.value);
					};
					target.innerHTML = '';
					target.appendChild(ipt);
					ipt.focus();
				};
				
				el.onclick = this.edit;
			};	

			function init(){
				new dEdit($('editBox'));
				new dEdit($('editBox2'));
				new dEdit($('editBox3'));
			}

			window.onload = init;
		</script>

	</head>
	
		<body>

			<span id="editBox">This is sample text.</span> <br/><br/>

			<span id="editBox2">This is sample text 222.</span> <br/><br/>

			<span id="editBox3">This is sample text 333.</span>

		</body>
	
	</html>
分享到：
| 使用struts的同步令牌避免form的重复提交
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics