不用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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
中国的第一台收音机
2021/03/01 无线电
PHP 实例化类的一点摘记
2008/03/23 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
vue实现表格过滤功能
2019/09/27 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
.NET笔试题(20个问题)
2016/02/02 面试题
架构师岗位职责
2013/11/18 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
高中开学感言
2015/08/01 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫