jQuery傳遞迴車

我一直在這個項目上工作，但到目前爲止，無法弄清楚如何進行：我有一個textarea用戶應該把輸入和輸入應直接打印到範圍現在我實際上可以做到這一點，但當用戶輸入一些回車（回車）時，範圍文本只顯示一個空格（實際上不是回車）。jQuery傳遞迴車

我製作了一個（小型）小提琴，以展示它在這個時刻的樣子。希望可以有人幫幫我。

https://jsfiddle.net/fqnngd44/

$(document).ready(function() { 
    $('#input').keyup(function() { 
     $('#text').text($(this).val()); 
    }); 
});

（換句話說：我需要textarea的打印實際回車（而不僅僅是一個空間）當按下回車鍵。）

來源

2015-09-30 Duque

的問題是，因爲HTML轉換任何組的空白字符（空格，製表符，回車，等），以一個單一的空間。爲了解決這個問題，你可以使用<br />替換textarea中的新行。另請注意，您需要使用html() instea的text()來顯示值，否則它將被HTML編碼。試試這個：

$(document).ready(function() { 
    $('#input').keyup(function() { 
     $('#text').html($(this).val().replace(/\r?\n/g, '<br />')); 
    }); 
});

Working example

來源

2015-09-30 14:58:36

非常感謝，這對我的工作！ +1 – Duque

沒問題，很樂意幫忙。 –

如果一行以空格開頭，此解決方案不會打印空格。可能最簡單的解決方案是使用CSS來執行此操作，該操作會同時打印新的行和空格。（查看我的回答） –

在jQuery documentation for .val()，它具有以下警告（和建議）

注意：目前，在textarea元素上使用.val（）會剝離瀏覽器報告的值中的回車符。然而，當這個值通過XHR被髮送到服務器時，回車被保留下來（或者被不包含在原始值中的瀏覽器添加）。可以使用valHook來實現一種用於此問題的解決方法如下：

$.valHooks.textarea = { 
    get: function(elem) { 
    return elem.value.replace(/\r?\n/g, "\r\n"); 
    } 
};

來源

2015-09-30 14:57:53 SlashmanX

在HTML的白色空間中的任何序列壓縮成一個空間，使發生回車被列爲空白。對於沒有發生，你可以使用一個<pre>標籤或使用的樣式white-space:pre

$(document).ready(function() { 
 
    $('#input').keyup(function() { 
 
     $('#text').text($(this).val()); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="input" name="input" type="textarea" maxlength="99"></textarea> 
 
<pre id="text"></pre>

來源

2015-09-30 15:00:52 Musa

對我也有效，感謝您的幫助！ – Duque

可能是最簡單的方法是將文本與white-space: pre;格式化。

演示：https://jsfiddle.net/fqnngd44/10/

來源

2015-09-30 15:04:08

jQuery傳遞迴車

回答

相關問題