1. 程式人生 > >Textarea換行輸出到前端無效果的推薦處理方法

Textarea換行輸出到前端無效果的推薦處理方法

在處理一些長文字的時候(僅是較長的純字串,還不用大動干戈使用富文字編輯器)經常會用到Textarea標籤作為輸入控制元件。

<textarea name='desc'></textarea>

Textarea作為一個輸入控制元件有許多優點:

  • 通過CSS可以方便地調節輸入框的長寬
  • 輸入過長文字的時候會自動換行顯示
  • 前端設定resizing屬性還可以讓使用者自主調節輸入框
  • 最好用的就是可以輸入多行文字,這對於一些只需要簡單段落排版的文字內容來說簡直太棒了

BUT!當信心滿滿在排好段落儲存重新整理頁面後。。。
我發現換行不!見!了!只有一大串亂糟糟的文字
但是重新整理後臺設定頁發現,Textarea中的文字還是規規矩矩的有換行的。。。。。。

最後
通過查詢資料瞭解到,這是由於在Textarea控制元件中,換行符是‘\n’(Mac系統中是\n\r),而前端頁面頁面是無法直接顯示這個換行的,只能顯示<br/>的換行。
資料中有許多大神提出,在做入庫前對Textarea的內容進行處理,替換對應的換行符,像下邊這樣:

    desc= odesc.value.replace(/\n|\r\n/g,"<br/>"); 

這樣儲存後輸出到前端是沒有問題的,但是又會出現另外一個問題,就是重新設定內容讀取到Textarea控制元件需要再次把換行替換回去,以避免在輸入框中HTML標籤亂入

    $desc = str_replace("<br/>"
,'\n',$desc);

考慮到對伺服器資源的節約(扣門)
最終在專案前端中用了這種方法:

<script>
$(function(){
    $("p.re-br").each(function() {
        var temp =  $(this).text().replace(/\n|\r\n/g,'<br/>');
        $(this).html(temp);
    });
});
</script>

純前端的解決辦法,伺服器那麼累就交給客戶端去解決吧,嘿嘿
(PS請參考使用率擇優選擇:))