不用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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
javascript截取字符串小结
Apr 28 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
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生成静态页面详解
2006/12/05 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
Python获取当前路径实现代码
2017/05/08 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
总经理助理岗位职责
2013/11/08 职场文书
英语自荐信范文
2013/12/11 职场文书
大学新生军训方案
2014/05/03 职场文书
自主招生推荐信范文
2014/05/10 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
模具专业自荐信
2014/05/29 职场文书
影视后期实训报告
2014/11/05 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
css3 文字断裂效果
2022/04/22 HTML / CSS
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js