打印

发个点击即可修改内容功能函数

本主题由 caiying2007 于 2008-4-2 12:08 设置高亮

cly84920 [楼主]

当当当

初级会员

帖子: 178
体力: 135
威望: 4
当前: 北京海淀区
离线: 1 天

专长 前端制作,JS,PHP

1^# 大中小发表于 2008-4-2 11:50

这个功能大家一定都见过吧？下面是我写的一个函数，功能比较全吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function changeContent(obj,strNum,oEvent,oWidth,oneLine,blurSave){	
		if(obj.getElementsByTagName("input").length>0) return;
		function isChinese(s){
			var p = /^[\u0391-\uFFE5]+$/;
			return p.test(s);
		}	
		var textOld=obj.innerHTML;
		if(!blurSave){
			if(oneLine){
				obj.innerHTML="<input type='text' style='width:220px;' value='"+obj.innerHTML.replace( /^\s*/, "").replace( /\s*$/, "")+"' /><input type='button' value='保存' class='sendBtn2' style='padding:0px;' /><input type='button' value='取消' class='sendBtn2' style='padding:0px;' />";
				var save=obj.getElementsByTagName("input")[1];
				var cancel=obj.getElementsByTagName("input")[2];
			} else {
				obj.innerHTML="<textarea style='width:250px;height:50px;'>"+obj.innerHTML.replace( /^\s*/, "").replace( /\s*$/, "")+" </textarea><br /><input type='button' value='保存' class='sendBtn2' style='padding:0px;' /><input type='button' value='取消' class='sendBtn2' style='padding:0px;' />";	
				var save=obj.getElementsByTagName("input")[0];
				var cancel=obj.getElementsByTagName("input")[1];
			}
		}else{
			if(oneLine){
				obj.innerHTML="<input type='text' style='width:220px;' value='"+obj.innerHTML.replace( /^\s*/, "").replace( /\s*$/, "")+"' />";
			} else {
				obj.innerHTML="<textarea style='width:250px;height:50px;'>"+obj.innerHTML.replace( /^\s*/, "").replace( /\s*$/, "")+" </textarea>";	
			}
		}
		var text;	
		if(oneLine){
			text=obj.getElementsByTagName("input")[0];
		} else {
			text=obj.getElementsByTagName("textarea")[0];	
		}
		if(typeof oWidth == "number"){
			text.style.width=oWidth+"px";	
		}
		text.select();
		text.onclick=function(oevent){
			if(document.all) window.event.cancelBubble=true;
			else oevent.stopPropagation();	
		}
		if(!blurSave){
			save.onclick=function(oevent){
				if(text.value.replace( /^\s*/, "").replace( /\s*$/, "")==""){
					obj.innerHTML=textOld;
				}else{
					obj.innerHTML=text.value;
					obj.innerHTML=obj.innerHTML.replace(/</ig,"&lt;");
					obj.innerHTML=obj.innerHTML.replace(/>/ig,"&gt;");
					if(strNum){
						for(var i=0;i<strNum;i++){
							if(isChinese(obj.innerHTML.charAt(i))) strNum--;
						}
						obj.innerHTML=obj.innerHTML.substring(0,strNum);
					}
					if(typeof oEvent == "string"){
						try	{eval(oEvent);}
						catch (e) {}
					}
					if(typeof oEvent == "function"){
						oEvent();
					}
					if(document.all) window.event.cancelBubble=true;
					else oevent.stopPropagation();
				}
				obj.style.background="transparent";
			}
			cancel.onclick=function(oevent){
				obj.innerHTML=textOld;
				obj.style.background="transparent";
				if(document.all) window.event.cancelBubble=true;
				else oevent.stopPropagation();	
			}
		}else{
			text.onblur=function(){
				if(text.value.replace( /^\s*/, "").replace( /\s*$/, "")==""){
					obj.innerHTML=textOld;
				}else{
					obj.innerHTML=text.value;
					obj.innerHTML=obj.innerHTML.replace(/</ig,"&lt;");
					obj.innerHTML=obj.innerHTML.replace(/>/ig,"&gt;");
					if(strNum){
						for(var i=0;i<strNum;i++){
							if(isChinese(obj.innerHTML.charAt(i))) strNum--;
						}
						obj.innerHTML=obj.innerHTML.substring(0,strNum);
					}
					if(typeof oEvent == "string"){
						try	{eval(oEvent);}
						catch (e) {}
					}
					if(typeof oEvent == "function"){
						oEvent();
					}
				}
				obj.style.background="transparent";
			}
		}
	}
</script>
</head>
<body>
<p onclick="var obj=this; changeContent(this,20,'alert(obj.innerHTML)','',true,true)">
我是阿当 ^0^
</p>
</body>
</html>

提示：您可以先修改部分代码再运行

函数有五个参数：
obj          要执行修改的DOM对象，
strNum    修改后，允许保留的最大值字符数，中文算两个字符，类型为数字，
oEvent    执行修改后的回调函数，可以写成字符串形式，或者function(){}形式，例如"alert('我是阿当');"，或者function(){alert("我是阿当");}
oWidth    输入框的长度，类型为数字。如果不设置，则使用默认值,
oneLine 输入框是否单行，类型为布尔值，为true表示单行，false表示多行。如果不设置，默认为多行显示,
blurSave 设置保存形式，类型为布尔值，如果为true表示输入框失去焦点即可保存，为false表示点击保存按钮保存内容。

因为一般情况下，点击即可修改内容是通过ajax方式提交的，那么我们需要得到修改后的内容，在oEvent参数中发送到服务器端。那么我们如何得到修改后的值呢？
<p onclick="var obj=this; changeContent(this,20,'alert(obj.innerHTML)','',true,true)">
我是阿当 ^0^
</p>
我们只要在调用changeContent()前，写下var obj=this,就可以在oEvent位置通过obj.innerHTML得到修改后的值。我们可以在这里写下<p onclick="var obj=this; changeContent(this,20,'sendAjax(obj.innerHTML)','',true,true)">).

如果要将行为分离出来也非常容易，只要写成下面的形式：
var obj=document.getElementById("XXX");
changeContent(obj,20,'alert(obj.innerHTML)','',true,true);

第一次发自己的函数，希望大家能够喜欢。有bug请留言，谢谢。

[ 本帖最后由 cly84920 于 2008-4-2 11:55 编辑 ]

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

jsw0528

蓝蓝的神仙

高级会员

帖子: 431
体力: 687
威望: 0
当前: 江苏南京

专长 PHP,ASP,UE

2^# 大中小发表于 2008-4-2 13:03

沙发,支持一下

承接ASP定制，http://08-if.cn/

TOP

美橙vps独立IP月付189元

jsw0528

蓝蓝的神仙

高级会员

帖子: 431
体力: 687
威望: 0
当前: 江苏南京

专长 PHP,ASP,UE

3^# 大中小发表于 2008-4-2 14:00

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="MSThemeCompatible" content="No">
<title>无标题文档</title>
<script type="text/JavaScript">

</script>
<style type="text/css">

</style>
</head>
<body>
<div id="divShowInput">
 <p id="barTitle" onClick="hideDiv(this)"></p>
 <p id="defComP" onClick="hideDiv(this)">
 <a href="javascript:void 0" onClick="clearInput()">清空</a>
 </p>
 <p id="autoFillP">
 <a href="javascript:void 0" onClick="fillInput(this)">Llinzzi</a>
 <a href="javascript:void 0" onClick="fillInput(this)">Huanhuan</a>
 <a href="javascript:void 0" onClick="fillInput(this)">Tom.com</a>
 <a href="javascript:void 0" onClick="fillInput(this)">超级长的长长长长长长</a>
 </p>
</div>
<table id="tbBackground" width="760" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table id="tbTopOpt" width="700" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="40" width="125"><a href="javascript:void 0" onClick="copySelect()">
  复制所选</a></td>
        <td width="537"><a href="javascript:void 0" onClick="delSelect()">删除所选</a></td>
        <td width="38"> </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table id="tbData" width="750" border="0" align="center" cellpadding="0" cellspacing="1">
 <thead>
      <tr>
        <td height="25" ><a href="javascript:void 0" onClick="selectAll();">全选</a></td>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td>A4</td>
        <td>A5</td>
        <td>A6</td>
        <td>A7</td>
        <td>A8</td>
        <td>A9</td>
        <td>A10</td>
        <td>A11</td>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td><input class="checkbox" type="checkbox" name="checkbox" value="checkbox"></td>
        <td><input name="A1" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A2" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A3" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A4" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A5" type="text"  onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A6" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A7" type="text"  onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A8" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A9" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A10" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A11" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
      </tr>
   </tbody>
    </table></td>
  </tr>
  <tr>
    <td><table width="700"  border="0" align="center" cellpadding="0" cellspacing="0" id="tbBomOpt">
      <tr>
        <td height="40" width="125"><a href="javascript:void 0" onClick="copySelect()">
  复制所选</a></td>
        <td width="537"><a href="javascript:void 0" onClick="delSelect()">删除所选</a></td>
        <td width="537"><a href="javascript:void 0" onClick="sendData()">提交</a></td>
        <td width="38"> </td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

提示：您可以先修改部分代码再运行

承接ASP定制，http://08-if.cn/

TOP

中央美院远程平面设计进修班

jsw0528

蓝蓝的神仙

高级会员

帖子: 431
体力: 687
威望: 0
当前: 江苏南京

专长 PHP,ASP,UE

4^# 大中小发表于 2008-4-2 14:03

上面的代码我百度来的，我不明白怎么把数据保存到数据库中，楼下的接

承接ASP定制，http://08-if.cn/

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

oklrc

新手上路

帖子: 12
体力: 20
威望: 0
离线: 93 天

5^# 大中小发表于 2008-4-2 19:06

回楼上的,上面那个代码是用ajax来实现数据保存的!

PHP程序

TOP

benaheng

笨阿哼

中级会员

帖子: 144
体力: 360
威望: 0
当前: 河北邢台
离线: 18 天

专长 PHP

6^# 大中小发表于 2008-4-2 19:13

不错留个记号

TOP

MarVell

高级会员

帖子: 767
体力: 744
威望: 0
当前: 河南洛阳
离线: 1 天

专长 前端制作

7^# 大中小发表于 2008-4-3 01:45

没事水一把...大家无视我就是了

<?xml version="1.0" encoding="UTF-8"?>
<!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="zh-cn" 
lang="zh-cn">
<head>
<title>演示</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="author" content="MarVel" />
<script type="text/javascript">
/* <![CDATA[ */
function focus(){
var text=document.getElementById("text");
	text.onfocus=function(){
		text.value="";
		text.className="focus";
	}
	text.onblur=function(){
		if (text.value==""){
			text.value="纯属瞎扯淡"
		}
		text.className="";
		alert(text.value);
	}
}
window.onload=focus;
/* ]]> */
</script>
<style type="text/css">
/* <![CDATA[ */
input {border:1px solid #fff; font-size:14px; width:20em;}
.focus {border:1px solid #333; font-size:12px; line-height:14px; width:20em;}
label {vertical-align:middle;}
/* ]]> */
</style>
</head>
<body>
<div><input id="text" type="text" maxlength="20" value="纯属瞎扯淡" /></div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 MarVell 于 2008-4-3 01:54 编辑 ]

不在放荡中变坏,就在沉默中变态...

TOP

cly84920 [楼主]

当当当

初级会员

帖子: 178
体力: 135
威望: 4
当前: 北京海淀区
离线: 1 天

专长 前端制作,JS,PHP

8^# 大中小发表于 2008-4-3 09:51

楼上的仁兄的确有一种新的思路，将input的边框色设为白色，而造成普通文本的假象。可是，如果是要使用带有保存按钮，而非失去焦点时保存又该怎么办呢？

阿当

TOP

dlhk1989

初级会员

帖子: 75
体力: 139
威望: 0
当前: 辽宁大连
离线: 19 天

9^# 大中小发表于 2008-4-3 09:54

7楼的有意思

TS

TOP

dashzhao

赵勇

银牌会员

帖子: 2313
体力: 1727
威望: 2
当前: 广东深圳

专长 项目管理

10^# 大中小发表于 2008-4-3 10:21

标记一下还没想到该应用到啥地方去好

一生缘-正规PR3交换友情链接

TOP

skybot

size

钻石会员

帖子: 2795
体力: 6553
威望: 6
当前: 上海长宁
离线: 1 天

专长 JS,C#,MSSQL

11^# 大中小发表于 2008-4-3 10:32

回复 #7 MarVell 的帖子

对于七楼的来说
用很少的代码就实现了功能不错啊
window.onload=focus; 最好不要这样用.因为一个window只能有一个onload方法,多了就不管用了

http://www.qlili.com 个人站帮点啊

TOP

MarVell

高级会员

帖子: 767
体力: 744
威望: 0
当前: 河南洛阳
离线: 1 天

专长 前端制作

12^# 大中小发表于 2008-4-3 13:52

回复 #11 skybot 的帖子

对于这个问题..用window.onload引用多个函数的话这样用:

window.onload = function() {
firstFuntion();
secondFunction();
}

这样.也做到了行为分离

不在放荡中变坏,就在沉默中变态...

TOP