不用ajax实现点击文字即可编辑的方法

2019-11-21 01:50:52

字体：大中小

来源：转载

供稿：网友

刚接触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>

最后解决浏览器问题的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>  <TITLE> New Document </TITLE>  <style>  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;}  </style>  <script language="javascript">  <!--  function $(e){   return document.getElementById(e);//封装获取函数  }  function edit(e){     //parseInt     $(e).style.display="none";     $(e+"fm").style.display="block";     $(e+"fm").childNodes[0].focus(); //div的子元素自动获得焦点  }  function hide(e){     //parseInt     $(e).style.display="none";     $(e=e.replace("fm","")).style.display="block";  }  -->  </script>  </HEAD>  <BODY>

唉！！忙了一晚上，就这么解决了！！嘻嘻呵呵

郁闷!<br> <font color=red><b>在firefox下 由于DOM有很小的差异，含有input的div中除标签内的空格外</b></font><br> <font color=red><b>不能有空格因为我们用的是childNodes[0]!否则需要点两下！</b></font>  <div>  <div class="show" id="test" onclick="edit(this.id)">可编辑的内容一</div>  <div class="hide" id="testfm"><input type="text" name="nn" value="可编辑的内容一" onBlur="hide(this.parentNode.id)" /></div>  <div class="show" id="test1" onclick="edit(this.id)">可编辑的内容二</div>  <div class="hide" id="test1fm"><input type="text" name="nn" value="可编辑的内容二" onBlur="hide(this.parentNode.id)" /></div>  <div class="show" id="test2" onclick="edit(this.id)">可编辑的内容三</div>  <div class="hide" id="test2fm">   <input type="text" name="nn" value="可编辑的内容三" onBlur="hide(this.parentNode.id)" >  </div>  <div class="show" id="test3" onclick="edit(this.id)">可编辑的内容四</div>  <div class="hide" id="test3fm">   <input type="text" name="nn" value="可编辑的内容四" onBlur="hide(this.parentNode.id)" >  </div>  </div>  </BODY> </HTML>

以上所述是小编给大家介绍的不用ajax实现点击文字即可编辑的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

上一篇：用javascript来实现动画导航效果的代码

下一篇：JS是否可以跨文件同时控制多个iframe页面的应用技巧