拋出問(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>
思考
- 為什么正則匹配只是
\n而不需要\r\n呢?
在JavaScript的string類型中,所有的回車表現(xiàn)形式都只有\n一種類型,無(wú)論在MAC OS系統(tǒng)還是windows系統(tǒng)。實(shí)踐證明,使用\r\n匹配反而不起作用 - 監(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)換