div和textarea內容轉換(****)
我能說由於這個東西被折騰了好久嗎~~~css
終於作出來了，寫出來，但願下次遇到的時候不要忘記了。。。html
CSS樣式this
<style>htm
.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>ip
HTMLinput
<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">
一、dfjdkfjdkfjd<br>
二、aaaaaaaaaa<br>
三、dfjdkfjdkfjd<br>
四、aaaaaaaaaa<br>
</div>
</body>io
SCRIPTfunction
<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>class
- 1. textArea換行符轉 轉 textArea換行符
- 2. div模擬textarea
- 3. textarea換行符轉化
- 4. div 內容居中
- 5. textarea 內容前端展現換行php處理
- 6. textarea標籤IE瀏覽器下內容不換行
- 7. Textarea和Java 換行符
- 8. React div 實現一個 textarea
- 9. div仿textarea可輸入
- 10. div模擬文本框textarea
- 更多相關文章...
- • XSLT - 轉換 - XSLT 教程
- • Eclipse 內容輔助 - Eclipse 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
-
每一个你不满意的现在，都有一个你没有努力的曾经。