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

posted @ 2018-01-23 11:51  blurs  阅读(205)  评论(0编辑  收藏  举报