不用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 09 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
微信小程序实现随机验证码功能
Dec 20 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
解析php中curl_multi的应用
2013/07/17 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
Python 字典中的所有方法及用法
2020/06/10 Python
Python如何telnet到网络设备
2021/02/18 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
个人培训自我鉴定
2014/03/28 职场文书
解除同居协议书
2015/01/29 职场文书
涨价通知
2015/04/23 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
总结Python常用的魔法方法
2021/05/25 Python
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python