不用ajax实现点击文字即可编辑的方法
2007-12-16 00:00
766 查看
刚接触creatElement ,appendChild 等东东!呵呵!
写了这个东西,可能在高手看来,非常的稚嫩!不过完全自己写的!
还没有完善,请大侠指导!!
看代码
最后解决浏览器问题的代码
New Document
body{font-size:14px;}
input{border:none;font-size:14px;}
.show{border:1px solid #ccc;background-color:#eee;width:150px;height:20px;}
.hide{border:1px solid #ccc;background-color:#eee;width:150px;height:20px;display:none;}
唉!!忙了一晚上,就这么解决了!!嘻嘻 呵呵
郁闷!
在firefox下 由于DOM有很小的差异,含有input的div中除标签内的空格外
不能有空格因为我们用的是childNodes[0]!否则需要点两下!
可编辑的内容一
可编辑的内容二
可编辑的内容三
可编辑的内容四
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
写了这个东西,可能在高手看来,非常的稚嫩!不过完全自己写的!
还没有完善,请大侠指导!!
看代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style> .test{border:1px solid #ccc;background-color:#eee;width:200px;height:60px;} </style> <script language="javascript"> <!-- function isIE(){ //ie? if (window.navigator.userAgent.indexOf("MSIE")>=1) return true; else return false; } if(!isIE()){ //firefox innerText define HTMLElement.prototype.__defineGetter__("innerText", function(){ return this.textContent; } ); HTMLElement.prototype.__defineSetter__("innerText", function(sText){ this.textContent=sText; } ); }function $(e){ return document.getElementById(e); } var arr=new Array(); function check(e){ var v=0; for(i=0;i<arr.length;i++) {if(arr[i]==e) v=1; else v=0;} if(v) return true; else return false; } function edit(e){ var x=$(e); var str=x.innerText; if (check(e)) { //alert("已经存在在数组里!"); //alert(str); var b=$(e+"fa"); str=$(e+"faz").value; b.removeChild($(e+"faz")); x.innerText=str; }else{ //alert("没有存在在数组里!"); a1=document.createElement("div"); a1.id=e+"fa"; a=document.createElement("INPUT"); a.name=e; a.id=e+"faz"; a.value=str; x.innerHTML=""; x.appendChild(a1); a1.appendChild(a); if(arr.length==0) arr[0]=e; else arr[arr.length]=e; //alert(a.name); } } --> </script> </HEAD> <BODY> <div class="test" id="test" onclick="edit('test')">可编辑的内容</div> <div class="test" id="test1" onclick="edit('test1')">可编辑的内容</div> </BODY> </HTML>
最后解决浏览器问题的代码
New Document
body{font-size:14px;}
input{border:none;font-size:14px;}
.show{border:1px solid #ccc;background-color:#eee;width:150px;height:20px;}
.hide{border:1px solid #ccc;background-color:#eee;width:150px;height:20px;display:none;}
唉!!忙了一晚上,就这么解决了!!嘻嘻 呵呵
郁闷!
在firefox下 由于DOM有很小的差异,含有input的div中除标签内的空格外
不能有空格因为我们用的是childNodes[0]!否则需要点两下!
可编辑的内容一
可编辑的内容二
可编辑的内容三
可编辑的内容四
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关文章推荐
- 不用ajax实现点击文字即可编辑的方法
- 不用ajax实现点击文字即可编辑的方法
- 不用AJAX实现前台JS调用后台C#方法(小技巧)-转
- 不用ajax的局部页面跳转实现方法(iframe)
- JS实现点击文字对应DIV层不停闪动效果的方法
- javascript实现点击后变换按钮显示文字的方法
- Android开发实现按钮点击切换背景并修改文字颜色的方法
- 微信公众号点击菜单即可打开并登录微站的实现方法
- 不用AJAX实现前台JS调用后台C#方法(小技巧) 【改自Web.网际浪人.Blog】
- 不用AJAX实现前台JS调用后台C#方法(小技巧)
- iOS UIButton文字和图片上下左右偏移封装,一个方法即可实现button上文字和图片不同位置的放置
- ASP.NET2.0中Tabs的简单实现 不用Asp.net Ajax ControlToolKit中的Tabs控件实现Tabs效果的简单实现方法:
- js实现点击后将文字或图片复制到剪贴板的方法
- 用jquery实现点击文字可编辑并保存修改至数据库
- javascript实现点击后变换按钮显示文字的方法
- 可输入文字查找ajax下拉框控件 ComBox的实现方法
- C# winform datagridview 无需点击两次即可编辑内嵌控件的方法和删除默认的空行的方法
- smarty框架中 点击即可编辑标题的 jquery实现代码
- JavaScript实现点击文字切换登录窗口的方法
- 通过自己写的方法实现不用ajax的POST方法请求(在网上看到的,感觉很实用)