簡體   English   中英

使用textarea中的jQuery .text()保持換行符

[英]Keep line breaks with jQuery .text() in textarea

我的地址填寫了<p>標簽。 單擊編輯按鈕,我將<p>標記地址轉換為<textarea>允許用戶編輯它。 但只要用戶點擊編輯, <p>標簽中的地址文本就會在<textarea>獲取而不會有換行符。

HTML標記:

<a href="" class="editShipAdd">Edit</a>
<a href="" class="saveShipAddBtn">Save</a>
    <table class="table shipping-address-table"> 
                                <tbody> 
                                    <tr>
                                        <td>
                                            <div class="jumbotron custjumbo">
      <p class="datainfo" id="shipping_address">123, Sample Street,<br>
       Sample Sample Road,<br> Bangalore, <br>Karnataka - 123xyz</p>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

JS代碼:

$(".editShipAdd").on("click", function(e){
    e.preventDefault();
    var datasets = $('.shipping-address-table>tbody>tr td').find(".datainfo");
    var savebtn = $('.saveShipAddBtn');
    datasets.each(function(){
      var theid   = $(this).attr("id");
      var newid   = theid+"-form";
      var currval = $(this).text().replace(/\r?\n/g, '<br />');

      console.log(currval);

        $(this).html('<textarea  name="'+newid+'" id="'+newid+'" value=""
         class="form-control">'+currval+'</textarea>');  
      });

    $(this).css("display", "none");
    savebtn.css("display", "inline-block");
  });

  $(".saveShipAddBtn").on("click", function(e){
    e.preventDefault();
    var elink   = $(this).prev(".editShipAdd");
    var datasets = $('.shipping-address-table>tbody>tr td').find(".datainfo");
    datasets.each(function(){
      var newid   = $(this).attr("id");
      var einput  = $("#"+newid+"-form");
      var newval  = einput.val().replace(/\r?\n/g, '<br />');
      console.log(newval);
      einput.remove();
      $(this).html(newval);
    });
     $(this).css("display", "none");
    elink.css("display", "inline-block");
    });

為了看問題,我在這里創建了一個小提琴演示

  1. 要獲得換行符,請使用$(this).html()而不是$(this).text()

  2. 要使用的textarea里面的換行符替換<br>&#013;&#010; 這是ASCII等價物。

這一行:

var currval = $(this).text().replace(/\r?\n/g, '<br />');

應該:

var currval = $(this).html().replace(/<br> ?/g, '&#013;&#010;');

更新了JSFiddle

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM