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


Posted in Javascript onDecember 16, 2007

刚接触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 弹出菜单/窗口效果
Oct 30 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 #Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 #Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 #Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 #Javascript
我见过最全的个人js加解密功能页面
Dec 12 #Javascript
文本链接逐个出现的js脚本
Dec 12 #Javascript
JavaScript创建命名空间(namespace)的最简实现
Dec 11 #Javascript
You might like
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
phplot生成图片类用法详解
2015/01/06 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python程序中设置HTTP代理
2016/11/06 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python中时间模块的基本使用教程
2019/05/14 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python 元组操作总结
2019/09/18 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
小学新学期教师寄语
2014/01/18 职场文书
教育科研先进个人材料
2014/01/26 职场文书
建筑管理专业求职信
2014/07/28 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
故宫导游词
2015/01/31 职场文书
新郎结婚感言
2015/07/31 职场文书
python解析json数据
2022/04/29 Python