推荐阅读
只在<form>元素上使用submit事件 如果要在form中绑定事件处理程序时，应该只在<form>元素上绑定submit事件，而不是给提交按钮绑定click事件。 March：这个方式固然很好，但是，公司开发时使用了Web Flow，一个页面>>>详细阅读
本文标题：不用ajax实现点击文字即可编辑的方法
地址：http://www.17bianji.com/kaifa2/JS/29925.html
1/2 1
不用ajax实现点击文字即可编辑的方法
作者： 来源：www.28hudong.com 2013-03-30 03:12:33 阅读次 我要评论
刚接触creatElement ，appendChild 等东东！呵呵！ 写了这个东西，可能在高手看来，非常的稚嫩！不过完全自己写的！ 还没有完善，请大侠指导！！ 看代码 复制代码 代码如下:<!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需刷新才能执行]
关键词： 探索发现
乐购科技部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与乐购科技进行文章共享合作。
网友点评
精彩导读
科技快报
品牌展示© 2013-2016 IT技术 京ICP备11016124号-4
京公网安备 11011202000261号