(function(w,i){

	w.inputOut = new i();

})(
window,
function(){ var inputOut = function(){ this.into = function(){ } this.into.apply(this,arguments); return this; } inputOut.prototype.editShow = function(element){
var self = this;
this.removeEvent();
if( this.input ) {
this.editChange(this.input,this.element);
}
var input = document.createElement("textarea");
input.style.position = "absolute";
input.style.zIndex = "100";
input.style.fontSize = function(){
var ret;
if( element.style.fontSize ) ret = element.style.fontSize;
else{
if( getComputedStyle )
ret = window.getComputedStyle(element).fontSize;
else
ret = element.currentStyle.fontSize;
}
return ret;
}();
input.style.width = element.offsetWidth + "px";
input.style.height = element.offsetHeight + "px";
input.style.top = element.offsetTop + "px";
input.style.left = element.offsetLeft + "px";
input.value = element.innerHTML.replace(/\s/g,"");
if( element.parentElement ){
element.parentElement.appendChild(input);
} input.select(); var bind; this.click = function(event){ self.editHide(event); } setTimeout(function(){ if( window.addEventListener ){
document.addEventListener("click",this.click);
input.onkeydown = function(e){ if( e.keyCode === 13 ) this.editChange(input,element); }.bind(this)
}else{
document.attachEvent("onclick",this.click);
} }.bind(this)) this.input = input;
this.element = element; return this; } inputOut.prototype.editChange = function(input,element){ if(!input.value || input.value == "") return; element.innerText = input.value; input.remove(); element.onchange && element.onchange.apply(this,arguments); this.removeEvent(); } inputOut.prototype.editHide = function(event){ if( event.target === this.input ) return; this.editChange(this.input,this.element); this.removeEvent(); this.input.remove(); } inputOut.prototype.removeEvent = function(){
if( window.addEventListener ){
document.removeEventListener("click",this.click);
}else{
document.detachEvent("onclick",this.click);
}
} return inputOut; }()
)

  

只需要在div上加上 onclick = 'inputOut.editShow(this)';
就行了  实际上这个参数this就是一个element对象 直接调用触发也行 完成修改之后会触发 onchange事件

关于div文字点击编辑的插件的更多相关文章

  1. ASP.NET - GridView实现点击编辑列

    加载: 点击编辑: 数据库设计: 前端代码: DataKeyNames="ID"  设置点击“编辑”选项的时候,要获取的值,一般获取ID主键,便于修改数据. AutoGenerat ...

  2. textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

  3. 点击编辑table变为可编辑状态

    简单描述:开发中遇到一个小困难,table展示的数据,需要是可编辑的,点击编辑按钮,页面table可以进行编辑,编辑完成后,点击保存数据就保留下来~~~ 思路:用一个带有input的表去替换不带inp ...

  4. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  5. div文字超出

    效果一:div文字超出处理 <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:elli ...

  6. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  7. vue点击返回顶部插件vue-totop

    vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...

  8. 怎么知道是哪个div被点击了

    怎么知道是哪个div被点击了 不在div中加onclick等事件调用函数 ,用事件监听函数,但是如果div中的div被点击了,addEventListener得到了两个监听事件,我想点击div里的di ...

  9. Jquery为DIV添加点击事件,Jquery为a标签超链接添加点击事件

    <div>1</div> <div>2</div> <div>3</div> <div>4</div> ...

随机推荐

  1. vue,在模块中动态添加dom节点,并监听

    在这里,onclick事件没有作用,因为它指向的是window,如果写为this.click页面显示为undefined, 我采用的是通过class绑定事件,但是会有一个问题,那就是当你渲染多个事件时 ...

  2. 2/17 笔记 n:字符串索引、切片、数据转换笔记

    切片:顾头不顾尾 s[首:尾:步长] 代码是从上到下依次判断,只要满足一个,就不会再往下走! continue和break有点类似,区别在于continue只是终止本次循环,接着还执行后面的循环,br ...

  3. Hadoop学习笔记05_HA

    ################# HA 即 High Available 高可用.# 其作用是为了减少主从结构的单点故障,而设置备用节点,既然学习了Hadoop生态圈,那么HA配置也是必须要掌握的. ...

  4. Bitmap RGB24 4字节对齐

    Bitmap RGB24 4字节对齐 本文中说的图片都是无压缩的彩色Bitmap图片. 最近在一个项目中有一个场景是需要将RGB32或RGB24的Bitmap转换成为RGB565的Bitmap,在RG ...

  5. 黑客炼金术士 Seeker:可以攻破 4G 摸到你短信,还要为朝阳群众提供谍战工具

    在北京上地的一家咖啡馆里,我在等待黑客 Seeker 的到来. 我对黑客 Seeker 颇有期待.他曾在黑客大会 KCon 上演讲<伪基站高级利用技术——彻底攻破短信验证码>,介绍利用 L ...

  6. .NET并行计算和并发7-Task异步

    使用任务并行库执行异步任务 下面的示例演示如何通过调用 TaskFactory.StartNew 方法来创建并使用 Task 对象. using System; using System.Thread ...

  7. Power BI中DAX的动态计算方差

    我花了一点时间试图解决一个棘手的DAX表达式,那就是如何动态计算方差,下面我们认识一下这两个函数: PARALLELPERIOD  和 SAMEPERIODLASTYEAR  它能实现我们想要的结果, ...

  8. datePecker时间控件区间写法

    成交时间: <input type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$d ...

  9. requests模块的使用

    requests模块 什么是request模块:requests是python原生一个基于网络请求的模块,模拟浏览器发起请求. requests-get请求 # get请求 import reques ...

  10. mongo 使用find的返回值,转换为数组形式

    $rs = $mongo->find(); var_dump(iterator_to_array($rs));