不用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 相关文章推荐
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
Vue动态获取width的方法
Aug 22 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
使用C++扩展Python的功能详解
2018/01/12 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Django模板Templates使用方法详解
2019/07/19 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
python 实现图片裁剪小工具
2021/02/02 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
linux面试相关问题
2012/08/11 面试题
学校创先争优活动总结
2014/08/28 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
如何撰写创业策划书
2019/06/27 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python