关于div文字点击编辑的插件
(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文字点击编辑的插件的更多相关文章
- ASP.NET - GridView实现点击编辑列
加载: 点击编辑: 数据库设计: 前端代码: DataKeyNames="ID" 设置点击“编辑”选项的时候,要获取的值,一般获取ID主键,便于修改数据. AutoGenerat ...
- textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标
1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...
- 点击编辑table变为可编辑状态
简单描述:开发中遇到一个小困难,table展示的数据,需要是可编辑的,点击编辑按钮,页面table可以进行编辑,编辑完成后,点击保存数据就保留下来~~~ 思路:用一个带有input的表去替换不带inp ...
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- div文字超出
效果一:div文字超出处理 <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:elli ...
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- vue点击返回顶部插件vue-totop
vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...
- 怎么知道是哪个div被点击了
怎么知道是哪个div被点击了 不在div中加onclick等事件调用函数 ,用事件监听函数,但是如果div中的div被点击了,addEventListener得到了两个监听事件,我想点击div里的di ...
- Jquery为DIV添加点击事件,Jquery为a标签超链接添加点击事件
<div>1</div> <div>2</div> <div>3</div> <div>4</div> ...
随机推荐
- java面向对象编程(六)--四大特征之继承
本文将介绍继承.方法重载和方法覆盖.其中方法重载和方法覆盖是在讲多态时必须要清楚的一个知识点. 一.继承 1.继承的概念 继承可以解决代码复用,让我们的编程更加靠近人类思维.当多个类存在相同的属性(变 ...
- split根据一个元素分割语句
a = ‘https://www.baidu.com/s?wd=%E7%AE%80%E4%B9%A6&rsv_spt=1&rsv_iqid=0xdfa3666f00083a6f& ...
- 浅入浅出JDBC————1分钟了解JDBC
一.了解基本的几个jdbc需要的类 1.1DriverManager类 DriverManager类是一个jdbc的驱动服务类.通常使用该类获得一个Connection对象,得到一个数据库的链接. 1 ...
- Oracle使用笔记(三)
在使用oracle过程中,总会遇到用户锁定,密码失效等问题,对于这些问题,总结了以下经验: 一.用户被锁定原因及解锁 对于用户被锁定,有以下几种原因: 1.密码过期: Oracle数据库的用户密码有效 ...
- python学习之路03
一.常量和变量 1.python中的数据类型 分类: Number:数字型[整型,浮点型,复数] String:字符串型 Boolean:布尔型[True,False] None:空值 ...
- 初识vue小结
初识vue 大家都那么热爱他一定有原因,我也特想了解. 我来咯, 首先用vue开发版,用一个标签在head中插入,script标签src属性引入vue文件,就像jquey一样在script,但是放在h ...
- JavaEE思维导图
- maven编译错误maven-assembly-plugin:2.2-beta-5:assembly (default-cli) on project
maven对项目编译时报错 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-assembly-plugin:2.2-beta ...
- springdata笔记2
SpringData整合hibernate CRUD操作: pom.xml <?xml version="1.0" encoding="UTF-8"?&g ...
- BEAM188简单应用
目录 BEAM188简介 APDL应用实例 显示梁三维图 BEAM188简介 BEAM188-3D线性有限应变梁 Beam188 单元适合于分析从细长到中等粗短的梁结构,该单元基于铁木辛哥梁结构理论, ...