div和textarea内容转换(****)

我能说因为这个东西被折腾了很久吗~~~

终于做出来了，写出来，希望下次遇到的时候不要忘记了。。。

CSS样式

<style>

.zhizuo{
width: 428px;
height: 103px;
float: left;
}
.zhizuo_text{
border: 1px solid grey;
margin-top: -2px;
font-family: "微软雅黑";
outline: none;
margin-bottom: 8px;
height: 95px;
width: 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, "\r").replace(/<br>/ig, "\n");
$(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(/\r/ig, "</br>").replace(/\n/ig, "</br>");
change_obj.html(obj_v);
$(obj).next(".zhizuo").css("display", "block");
}
</script>

 

posted @ 2016-05-04 15:54  刘~燕  阅读(839)  评论(0)    收藏  举报