function InlineEdit(attachNode,options){
	this._attachNode = $(attachNode);
	this._value = $(attachNode).value;
	this._span = SPAN(null, this._value);
	insertSiblingNodesAfter(this._attachNode,[this._span]);
	addElementClass(this._attachNode, 'RK-invisible');
	addElementClass(this._attachNode, 'RK-shrink');
	addElementClass(this._span,'RK-clickable');
	self = this;
	
	this.getValue = function(){
		return self._attachNode.value;
	}
	this.setValue = function(newValue){
		self._attachNode.value = newValue;
		self._span.innerHTML = newValue;
	}
	
	this.exitEdit = function(){
		removeElementClass(self._span, 'RK-invisible');
		removeElementClass(self._span, 'RK-shrink');
		addElementClass(self._attachNode, 'RK-invisible');
		addElementClass(self._attachNode, 'RK-shrink');
		self.setValue( self._attachNode.value);
	}
	
	this.enterEdit = function(){
		removeElementClass(self._attachNode, 'RK-invisible');
		removeElementClass(self._attachNode, 'RK-shrink');
		
		addElementClass(self._span, 'RK-invisible');
		addElementClass(self._span, 'RK-shrink');
		self._attachNode.value = self._span.innerHTML;
		self._attachNode.focus();
	}
	
	this._highlight = function(){
		addElementClass(self._span,'RK-highlight');
		
	}
	
	this._removeHighlight  = function(){
		removeElementClass(self._span,'RK-highlight');
	}
	
	connect(this._span, 'onclick', this.enterEdit);
	connect(this._attachNode,'onblur', this.exitEdit);
	connect(this._span,'onmouseover',this._highlight);
	connect(this._span,'onmouseout', this._removeHighlight);
}

mochikit inline edit

javascript

JavaScript