不用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 location几个方法小姐
Jul 09 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
js实现圆形显示鼠标单击位置
Feb 11 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的引用详解
2015/02/22 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
理解JS绑定事件
2016/01/19 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
数据员岗位职责
2013/11/19 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
银行办理业务介绍信
2014/01/18 职场文书
无偿献血倡议书
2014/04/14 职场文书
授权委托书(完整版)
2014/09/10 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
销售员态度差检讨书
2014/10/26 职场文书
大学学生个人总结
2015/02/15 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
python基础入门之字典和集合
2021/06/13 Python
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技