不用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 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP面向对象详解(三)
2015/12/07 PHP
简单实现PHP留言板功能
2016/12/21 PHP
jquery 插件学习(四)
2012/08/06 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
django页面跳转问题及注意事项
2019/07/18 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
Android interview questions
2016/12/25 面试题
C#和SQL Server的面试题
2016/08/12 面试题
机工车间主任岗位职责
2014/03/05 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
升学宴家长答谢词
2015/09/29 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
PHP实现两种排课方式
2021/06/26 PHP
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers