[原创 js] 点击即可修改内容函数
2008-04-18 10:28
513 查看
今天写第一篇，就放一个原创的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);
点击即可修改内容，这个功能大家一定都见过吧？下面是我写的一个函数，功能比较全吧。
<!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);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [原创 js] 点击即可修改内容函数
- JS函数修改html的元素内容,及修改属性内容的方法
- js实现点击按钮出现输入框本地修改文字内容功能
- 点击按钮触发js获取标签里的内容并修改
- JS函数修改html的元素内容，及修改属性内容
- js应用中的总结（菜单项点击，出现相应的内容）
- C# ,webBrowser,登录,数据填充,模拟点击链接,运行JS函数
- WdatePicker.js 日历点击时，触发自定义方法 ,可以调用自己的函数。
- 【原创】修改 Workshop 中 text box 输入内容的颜色
- Eclipse修改右键点击新建的内容
- vue 实现 点击取消监控内容是否发生修改 若修改提示 是否需要保存
- 在ASP中利用ADO显示Excel文件内容的函数[原创]
- JS自定义功能函数实现动态添加网址参数修改网址参数值
- ASP.NET 使用CustomValidator调用js函数动态修改验证TextBox的正则表达式，无刷新
- angularjs ui-select 如果select的内容为空 则禁止点击
- 同一域名对应多个IP时，PHP获取远程网页内容的函数[原创]
- C++string中有关字符串内容修改和替换的函数浅析
- js修改:before、:after的内容
- js 点击button，隐藏内容，同时更改value值
- 表单提交到下一个页面后，再点击IE上的后退，如何能让表单内容再次显示出来？(以及当前页禁止IE返回按钮js)