js双击修改内容

/**
 * 双击修改
 * @param o object    this对象
 * @param url string  修改调用的url，格式为： 模块/控制器/方法  例:__MODULE__/flink/set_field
 * @param msg string  修改后的提示信息
 * 
 * 在引用元素中加上 id="" field="" 两个属性
 * 
 * 前台使用示例: ondblclick="doubleClickUpdate(this,'__MODULE__/article/set_field')"
 * 旧的改新的后台需要改这几处，post改为get，val改为value
 */
function doubleClickUpdate(o,url,msg){
	if(o.children.length >= 1){return false;}
	var id = o.id;
	var field = o.getAttribute('field');
	var con = o.innerHTML;
	var w = o.offsetWidth-3;
	var h = o.offsetHeight-5;
	o.innerHTML = "<input id="+id+field+" style='width:"+w+"px;height:"+h+"px;border:0px solid #fff;outline:0;' value='"+con+"'>";
	
	var update_input = document.getElementById(id+field);
	update_input.focus();
	update_input.onblur = function (){
		var val = update_input.value;
		if(typeof msg == 'undefined'){
			this.parentNode.innerHTML = val;
		}else{
			this.parentNode.innerHTML = msg;
		}
		//如果新旧值相同则不作为
		if(con == val){return;}
		var ajax;
		if(window.XMLHttpRequest){
			ajax = new XMLHttpRequest();
		}else{
			ajax = new ActiveXObject('Microsoft.XMLHTTP');
		}
		ajax.open('GET',url+'/id/'+id+'/field/'+field+'/value/'+val,true);
		ajax.send();
	}
}

$(function (){
	$(document).on('dblclick','.ajax_update',function (){
		_Object = $(this);
		Url = '/article/Other/setFlinkField';
		var oldVal = $(this).html();
		var newVal = null;
		id = _Object.attr('_id');
		field = _Object.attr('field');
		if(_Object.children('input').length == 0){
			width_ = _Object[0].offsetWidth-3;
			height_ = _Object[0].offsetHeight-5;
			S = "style='width:"+width_+"px;height:"+height_+"px;border:0px solid #fff;outline:0;'";
			$(this).html('<input type="text" '+S+' id="'+id+field+'" value="'+oldVal+'"/>');
		}
		input = $("#"+id+field);
		input.focus();
		input.on('blur keyup',function (e){
			var e = e || window.event;
			if(e.type == 'keyup' && e.keyCode != 13){return false;}
			newVal = input.val();
			_Object.html(newVal);
			if(oldVal != newVal){
				$.post(Url,{id:id,field:field,value:newVal},function (data,status){
					if(status == 'success'){
						if(data.status == 1){
							_Object.addClass('bk2');
							setTimeout(function (){_Object.removeClass('bk2');},100);
						}else{
							_Object.addClass('red');
							setTimeout(function (){_Object.removeClass('red');},100);
						}
					}else{
						alert('网络错误');
					}
				});
			}
		});
	});
});

双击使用textarea查看内容

	$(document).on('dblclick','.dbclick',function (){
		var thisObject = $(this);
		if(thisObject.children('textarea').length != 0) return null;
		var con = thisObject.children().html();
		var width = thisObject.children().width();
		var height = null;
		var brLength = null;
		var conLength = con.length;
		var singleHeight = 15; // 每一行的高度
		var lineMaxNum = 29; //每行最大文字数目
		console.log(conLength);
		if(temp = con.match(/\n/ig)){
			brLength = temp.length;length; //换行个数
		}
		if(brLength == null && conLength <= lineMaxNum){
			height = singleHeight;
		}else if(brLength == null && conLength > lineMaxNum){
			height = Math.ceil(conLength/lineMaxNum)*singleHeight;
			if(height > 200){
				height = 200;
			}
		}else if(brLength > 0){
			height = singleHeight*(brLength + 1);
			if(height > 200){
				height = 200;
			}
		}
		var textareaObject = $('<textarea></textarea>');
		textareaObject.css({height:height,width:width-4,display:'block',resize:'none',border:0,outline:0}).html(con);
		thisObject.html(textareaObject);
		textareaObject.focus();
		textareaObject.on('blur',function (){
			thisObject.html('<div style="max-height:20px;outline:0;" class="w_400 oh">'+con+'</div>');
		});
	});