我能说因为这个东西被折腾了很久吗~~~
终于做出来了，写出来，希望下次遇到的时候不要忘记了。。。
CSS样式
<style>
.zhizuo{
428px;
height: 103px;
float: left;
}
.zhizuo_text{
border: 1px solid grey;
margin-top: -2px;
font-family: "微软雅黑";
outline: none;
margin-bottom: 8px;
height: 95px;
86%;
}
</style>
HTML
<body>
<textarea class="zhizuo_text" onmousedown="mousedoen_text(this)" onblur="blur_input(this)" style="display:none;" name="" id="" cols="30" rows="10"></textarea>
<div onclick="show_text(this)" class="zhizuo">
1、dfjdkfjdkfjd<br>
2、aaaaaaaaaa<br>
3、dfjdkfjdkfjd<br>
4、aaaaaaaaaa<br>
</div>
</body>
SCRIPT
<script>
//点击div后显示前面的textarea
function show_text(obj) { // div
$(obj).css("display", "none");
var div_te = $(obj).html();
div_te = div_te.replace(/<br>/ig, "
").replace(/<br>/ig, "
");
$(obj).prev().text(div_te);
$(obj).prev("textarea").css("display", "block");
$(obj).prev().focus();
}
//onblur事件
function blur_input(obj){ //textarea
$(obj).css("display", "none");
var change_obj = $(obj).next(".zhizuo");
var obj_v = $(obj).val();
obj_v = obj_v.replace(/
/ig, "</br>").replace(/
/ig, "</br>");
change_obj.html(obj_v);
$(obj).next(".zhizuo").css("display", "block");
}
</script>