[原创 js] 点击即可修改内容函数
今天写第一篇，就放一个原创的js函数吧。
点击即可修改内容，这个功能大家一定都见过吧？下面是我写的一个函数，功能比较全吧。
<!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,"<");
obj.innerHTML=obj.innerHTML.replace(/>/ig,">");
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,"<");
obj.innerHTML=obj.innerHTML.replace(/>/ig,">");
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>
<p onclick="var obj=this; changeContent(this,20,'alert(obj.innerHTML)','',false,true)">
我是阿当 ^0^
</p>
<p onclick="var obj=this; changeContent(this,20,'alert(obj.innerHTML)','',false,false)">
我是阿当 ^0^
</p>
<p onclick="var obj=this; changeContent(this,20,'alert(obj.innerHTML)','',true,false)">
我是阿当 ^0^
</p>
<p onclick="var obj=this; changeContent(this,60,'alert(obj.innerHTML)','',true,false)">
我是阿当 ^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);
