js 回車轉(zhuǎn)<br />

拋出問(wèn)題

最近做項(xiàng)目遇到個(gè)需求:“需支持換行,可考慮用富文本,但不提供換行外的其它功能”。

方案

只是需要提供換行而已,所以根本不需要用到富文本。直接用textarea然后用正則匹配把回車轉(zhuǎn)成<br />不就行了嗎?

代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>回車轉(zhuǎn)<br /></title>
</head>
<body>
  <textarea rows="4" cols="50" id='text'></textarea>
<script>
  var textarea = document.getElementById('text');
  textarea.addEventListener('input', function(e){
    var string = e.target.value.replace(/\n/g,'<br />');
    console.log(string);
  })
</script>
</body>
</html>

思考

  1. 為什么正則匹配只是\n而不需要\r\n呢?
    在JavaScript的string類型中,所有的回車表現(xiàn)形式都只有\n一種類型,無(wú)論在MAC OS系統(tǒng)還是windows系統(tǒng)。實(shí)踐證明,使用\r\n匹配反而不起作用
  2. 監(jiān)聽(tīng)事件為input而不是change呢?
    oninput事件要求值的每一次更新都觸發(fā),而onchange事件不要球每一次更新都觸發(fā),它發(fā)生在textarea(或者input等)失去焦點(diǎn)時(shí)

寫(xiě)在最后

實(shí)驗(yàn)證明,后端(java)能接收到textarea保留的回車?,并自動(dòng)轉(zhuǎn)義成\n的形式,傳回來(lái)給前端的時(shí)候也能自動(dòng)變成可識(shí)別的?這種格式。故遇到這種需求時(shí)可先不轉(zhuǎn),試一下前后端對(duì)接時(shí)能不能自動(dòng)轉(zhuǎn)換

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容