关于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> ...
随机推荐
- JavaScript中的DOM及相关操作
一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...
- Java连接数据库的driver和url写法
oracle driver="oracle.jdbc.driver.OracleDriver" url="jdbc:oracle:thin:@localhost:1521 ...
- 前台的url通过 ActionName?var1=xx&var2=yy 的形式传给特定action
本文对自己开发的基于lucene和J2EE技术的搜索引擎开发经验进行简单总结.今后可能会从性能的角度总结lucene开发经验.当数据上TB级别后,分布式lucene以及结合分布式文件系统(如HDFS) ...
- vim中将小写替换为大写--快速解决变量名风格
将C语言的下划线分割快速替换为Java的驼峰方式. 命令如下 :%s/_\([a-zA-Z]\)/\U\1/g 参考文档
- 冒泡排序到k趟
浙大pat题目 将N个整数按从小到大排序的冒泡排序法是这样工作的:从头到尾比较相邻两个元素,如果前面的元素大于其紧随的后面元素,则交换它们.通过一遍扫描,则最后一个元素必定是最大的元素.然后用同样的方 ...
- 【SpringBoot】SpringBoot拦截器实战和 Servlet3.0自定义Filter、Listener
=================6.SpringBoot拦截器实战和 Servlet3.0自定义Filter.Listener ============ 1.深入SpringBoot2.x过滤器Fi ...
- groovy学习知识
(1)Groovy是一种基于JVM的敏捷开发语言,它结合了Python.Ruby和Smalltalk的许多强大的特性,Groovy 代码能够与 Java 代码很好地结合,也能用于扩展现有代码.它是一种 ...
- 高分辨率下放大netbeans中的小图标
参考:http://ask.csdn.net/questions/388953 在高DPI下,Netbeans 8.2的图标变得非常小.怎么办? 修改C:\Program Files\NetBeans ...
- 实战 ant design pro 中的坑
1.替换mock数据: 1.将:.roadhogrc.mock.js 中的代理模式替换 当不使用代理的时候就会将所有 /api/的链接换成 http://localhost:8080/ export ...
- 文件-- 字节相互转换(word、图片、pdf...)
方式一: /// <summary> /// word文件转换二进制数据(用于保存数据库) /// </summary> /// <param name="wo ...