html textarea是什么意思？如何取得textarea標(biāo)簽中的換行符與空格？

html textarea定義和用法：

<textarea>標(biāo)簽定義多行的文本輸入控件。

文本區(qū)中可容納無(wú)限數(shù)量的文本，其中的文本的默認(rèn)字體是等寬字體（通常是 Courier）。

可以通過(guò) cols 和 rows 屬性來(lái)規(guī)定 textarea 的尺寸，不過(guò)更好的辦法是使用 CSS 的 height 和 width 屬性。

注釋：在文本輸入?yún)^(qū)內(nèi)的文本行間，用 "%OD%OA" （回車/換行）進(jìn)行分隔。

提示：可以通過(guò) <textarea> 標(biāo)簽的 wrap 屬性設(shè)置文本輸入?yún)^(qū)內(nèi)的換行模式。

HTML <textarea> 標(biāo)簽實(shí)例：

<textarea rows="3" cols="20">

在php中文網(wǎng)，你可以找到你所需要的所有的網(wǎng)站建設(shè)教程。

</textarea>

html textarea的屬性：

HTML中的標(biāo)簽textarea的屬性及用法：

1.cols，垂直列。在沒有做樣式表設(shè)置的情況下，它表示一行中可容納下的字節(jié)數(shù)。例如cols=60，表示一行中最多可容納60個(gè)字節(jié)，也就是30個(gè)漢字。另外要注意的是，文本框的寬度就是通過(guò)這個(gè)來(lái)調(diào)整，輸入好cols的數(shù)值，然后再定義輸入文字字體的大�。ú欢�義的話，會(huì)采用默認(rèn)值），那么文本框的寬度就確定了。

2.rows，水平列。表示可顯示的行數(shù)，例如rows=10，表示可顯示10行。超過(guò)10行，則需要拖動(dòng)滾動(dòng)條來(lái)瀏覽了。

3.name，文本框的名稱，這項(xiàng)必不可省，因?yàn)榇鎯?chǔ)文本的時(shí)候必須用到。

4.warp，當(dāng)warp="off"表示該文本區(qū)域中不自動(dòng)換行，當(dāng)然不寫默認(rèn)是自動(dòng)換行的。這個(gè)參數(shù)一般用得比較少。

5.style，這是個(gè)非常實(shí)用的參數(shù)，可以用來(lái)設(shè)置文本框的背景色，滾動(dòng)條顏色及形式，邊框色，輸入字體的大小顏色等等。

6.class,一般用來(lái)調(diào)用外部css里邊的設(shè)置。

獲取textarea標(biāo)簽中的換行符和空格:

問(wèn)題：獲取到textarea標(biāo)簽內(nèi)的格式（換行符、空格）取到，存入數(shù)據(jù)庫(kù)，展示的時(shí)候能夠保留基本格式。

解決思路：

IE9以上、FF、chrome的換行為\n， IE7-8的時(shí)候換行為\r\n，空格都為\s

所以需要利用replace把不同瀏覽器的\n和\r\n都替換為html代碼的</br>，把\s空格替換為html的&nbsp

注：如果使用jQuery的val()獲取textarea的值，取得的值是不含有回車（\r）字符的。但是如果該值是通過(guò) XHR 傳遞給服務(wù)器的，回車（\r）字符會(huì)被保留（或者是被瀏覽器添加的，但是在原始數(shù)據(jù)中并不包含回車（\r））。

該例對(duì)\r和\r\n都做了replace替換，實(shí)際效果不受影響，只需要注意一下有區(qū)別。

代碼如下：

html:

<textarea name="" id="text" cols="30" rows="3"></textarea>
<input type="button" id="btn" value="測(cè)試測(cè)試" />
<div id="show"></div>

js:

document.getElementById("btn").onclick = function() {
var strContent = document.getElementById("text").value;
alert("處理前的strContent為\r\n"+strContent);
strContent = strContent.replace(/\r\n/g, '<br/>'); //IE9、FF、chrome
strContent = strContent.replace(/\n/g, '<br/>'); //IE7-8
strContent = strContent.replace(/\s/g, ' '); //空格處理
alert("轉(zhuǎn)換之后的html代碼為\r\n"+strContent);
document.getElementById("show").innerHTML = strContent;
};

【相關(guān)推薦】

HTML中的lang屬性是干嘛的呢？HTML中的lang屬性有什么作用呢？

HTML5新增的結(jié)構(gòu)元素有哪些？HTML5新增的結(jié)構(gòu)元素的用法（推薦）

以上就是html textarea是什么意思？如何獲取textarea標(biāo)簽中的換行符和空格？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！