关于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> ...
随机推荐
- 蓝牙协议分析(11)_BLE安全机制之SM
1. 前言 注1:此SM是Security Manager的缩写,非彼SM,大家不要理解歪了! 书接上文,我们在“蓝牙协议分析(10)_BLE安全机制之LE Encryption”中介绍了BLE安全机 ...
- laravel 常用命令
1.创建控制器 php artisan make:controller ArticleController // 带 restful 风格 php artisan make:controller Ar ...
- 官网下载MySQL最新版本的安装包
下载地址:http://www.mysql.com/downloads/ 1.选择下载社区版本 MySQL Community Edition (GPL)Community (GPL) Downloa ...
- win10下VM 中centos 安装共享文件
一. 安装VMware Tools VMwareTools的安装脚本是要使用到perl的,而CentOS 6自身不带perl,所以需要自己安装.可以自己下载源代码编译,也可以直接用yum来安装. y ...
- 百度地图JS只显示一个省
转载地址:http://www.cnblogs.com/wondergx/p/5305602.html 转载地址:https://blog.csdn.net/myfmyfmyfmyf/article/ ...
- js调用app启动页
第一步:添加js $(function () { var ua = window.navigator.userAgent.toLowerCase(); //微信 if(ua.match(/MicroM ...
- cstdlib和stdlib.h区别
一.区别 #include<stdlib.h> :.h是C的习惯 #include<cstdlib> : c开头是C++的习惯 二.stdlib.h是C语言库头文件之一,包含了 ...
- 初识nginx反向代理和缓存机制
实现的需求图: 环境: nginx缓存和反向代理服务器:192.168.0.224 实际存储数据机器:192.168.0.37 一.实现反向代理 1.安装nginx,两台服务器都需要安装 1)安装 ...
- problem:浏览器如何区分html超文本和普通文本
运营同学问:后端返回的一串元素标签,我想在网页中显示的时候,将标签中的内容渲染出来,不希望直接显示标签. 回答:bootstrap加模版组织的网页,模版渲染的数据只能渲染字符串,不能转化富文本. 运营 ...
- bzoj5102: [POI2018]Prawnicy
Description 定义一个区间(l,r)的长度为r-l,空区间的长度为0. 给定数轴上n个区间,请选择其中恰好k个区间,使得交集的长度最大. Input 第一行包含两个正整数n,k(1<= ...