[英]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");
});
為了看問題,我在這里創建了一個小提琴演示
要獲得換行符,請使用$(this).html()
而不是$(this).text()
。
要使用的textarea里面的換行符替換<br>
與

這是ASCII等價物。
這一行:
var currval = $(this).text().replace(/\r?\n/g, '<br />');
應該:
var currval = $(this).html().replace(/<br> ?/g, '
');
更新了JSFiddle
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.