关于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事件