HTML標(biāo)簽textarea內(nèi)部換行實(shí)現(xiàn)方法
當(dāng)在使用textarea的時(shí)候，有一次需求，需要做到自定義換行，而不是通過(guò)textarea定寬來(lái)自動(dòng)換行，其實(shí)在html中可以直接通過(guò)<br/>來(lái)?yè)Q行，同時(shí)也想到用\n來(lái)實(shí)現(xiàn)換行，其結(jié)果是根本不鳥(niǎo)你。
<textarea cols="50" rows="5" id="textareaid">"adfsadfs<br/>fddsadfds \n dfadadf"</textarea>
百度幾翻網(wǎng)上確實(shí)有說(shuō)可以用\r\n去實(shí)現(xiàn)換行，如果只兼容微軟系統(tǒng)的話直接\n即可，但是實(shí)驗(yàn)確實(shí)不行，后面想到是不是必須通過(guò)JS賦值才可以實(shí)現(xiàn)，于是出現(xiàn)如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea cols="50" rows="5" id="textareaid">"adfsadfs<br/>fddsadfds \n dfadadf"</textarea>
<script type="text/javascript">
document.onclick=function(){
alert(1);
var str='5456455d4fgdfgdgdg \n dsfafdadfadfafa';
document.getElementById("textareaid").value=str;
}
</script>
</body>
</html>
成功的實(shí)現(xiàn)了textarea換行，所以我推斷，要想實(shí)現(xiàn)textarea換行，必須得動(dòng)態(tài)JS賦值才行。
注：百度上有說(shuō)明要想實(shí)現(xiàn)兼容linux,unix,Mac OS,window,可以把\n換成\r\n,但我在蘋(píng)果系統(tǒng)下用\n也實(shí)現(xiàn)了換行，linux,unix系統(tǒng)下沒(méi)測(cè)試，求解
textarea文字換行保存到數(shù)據(jù)后讀出來(lái)沒(méi)有換行 解決方案：
1.需要保存數(shù)據(jù)庫(kù)之前把textarea中的換行字符轉(zhuǎn)換為<br>存儲(chǔ)到數(shù)據(jù)庫(kù)。
2當(dāng)讀取的時(shí)候在把<br> 替換成textarea的換行符\n就好了
注意：使用replace 方法的時(shí)候需要用正則表達(dá)式，否則只能替換第一個(gè)換行
例如：
str="你好?。?nbsp;
親愛(ài)的:
1.存儲(chǔ)數(shù)據(jù)庫(kù)之前執(zhí)行
dbstr = str.replace(/\n|\r\n/g,"<br>");
2.取值的時(shí)候用正則表達(dá)式：
var reg=new RegExp("<br>","g"); //創(chuàng)建正則RegExp對(duì)象
var newstr=remContent.replace(reg,"\n");
3.把newstr 顯示在textarea后
處理textarea的空格和換行：
用戶的文章時(shí)好像沒(méi)有處理輸入的換行和空格，之前沒(méi)有很在意，因?yàn)檫@次我辛苦縮進(jìn)的代碼居然顯示一團(tuán)糟，有點(diǎn)接受不了，鑒于最近做的需求遇到了這個(gè)問(wèn)題，所以說(shuō)一下這個(gè)問(wèn)題，鑒于開(kāi)發(fā)是在windows下的，linux和蘋(píng)果有空再測(cè)試一下，因?yàn)椴煌牟僮飨到y(tǒng)對(duì)換行的表示不一樣。
其實(shí)這個(gè)處理那挺簡(jiǎn)單的，用一句代碼就可以解決了，“your string”.replace(/\n/g,"<br/>").replace(/\s/g," "),換行一般是\r,\n或者\(yùn)r\n,只是不同的系統(tǒng)不一樣，大家有興趣可以試試。原理就是textarea會(huì)把用戶按鈕插入字符串中，但是在瀏覽器中，表示換行和空格的<br/>, ，所以我們?cè)阡秩局靶枰绒D(zhuǎn)成瀏覽器的字符。
順便提一下，可以通過(guò)H5的屬性contentEditalble來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的textarea,不過(guò)這是輸入的換行和空格會(huì)轉(zhuǎn)成瀏覽器對(duì)應(yīng)的格式，再次顯示的時(shí)候我們就不需要轉(zhuǎn)了，但是這個(gè)屬性實(shí)現(xiàn)文本框也會(huì)有很多棘手的問(wèn)題，有興趣可以看一下。
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇
