span >
 textarea rows= 0 cols= 0 name= jsonHidden readonly= readonly >
 input type= submit html' target='_blank'>value= 提交 
 此段代碼設(shè)置一個(gè)textarea文本框 并且設(shè)置為隱藏
2.textarea高度自適應(yīng)
今天需要些一個(gè)回復(fù)評(píng)論的頁面，設(shè)計(jì)師給的初始界面就是一個(gè)只有一行的框。然后當(dāng)時(shí)就想這個(gè)交互該怎么實(shí)現(xiàn)比較好，然后想起了新浪微博的做法：點(diǎn)擊評(píng)論，默認(rèn)顯示一行，當(dāng)輸入的文字超過一行或者輸入Enter時(shí)，輸入框的高度會(huì)隨著改變，直到輸入完畢。頓時(shí)覺得這個(gè)細(xì)節(jié)做得挺不錯(cuò)的，可以效仿下。下面分享2種實(shí)現(xiàn)textarea高度自適應(yīng)的做法，一種是用div來模擬textarea來實(shí)現(xiàn)的，用CSS控制樣式，不用js；另一種是利用JS控制的（因?yàn)榇嬖?a href='http://www.5lwq4hdr.cn/tag/liulanqi_7527_1.html' target='_blank'>瀏覽器兼容問題，所以寫起來比較麻煩）；
方法一：div模擬textarea文本域輕松實(shí)現(xiàn)高度自適應(yīng)
因?yàn)閠extarea不支持自適應(yīng)高度，就是定好高度或者是行數(shù)之后，超出部分就會(huì)顯示滾動(dòng)條，看起來不美觀。
而用DIV來模擬時(shí)，首先遇到的問題是：div怎么實(shí)現(xiàn)輸入功能？
可能我們還是第一次見到這個(gè)屬性contenteditable，如一個(gè)普通的block元素上加個(gè)contenteditable= true 就實(shí)現(xiàn)編輯，出現(xiàn)光標(biāo)了。如
 div contenteditable= true /div 
 contenteditable屬性雖是HTML5里面的內(nèi)容，但是IE似乎老早就支持此標(biāo)簽屬性了。所以，兼容性方面還是不用太擔(dān)心的。
CSS代碼
.textarea{ width:400px; min-height:20px; max-height:300px; _height:120px; margin-left:auto; margin-right:auto; padding:3px; outline:0; border:1pxsolid#a0b3d6; font-size:12px; line-height:24px; padding:2px; word-wrap:break-word; overflow-x:hidden; overflow-y:auto; border-color:rgba(82,168,236,0.8); box-shadow:inset01px3pxrgba(0,0,0,0.1),008pxrgba(82,168,236,0.6);}
方法二：文本框textarea根據(jù)輸入內(nèi)容自適應(yīng)高度
demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo2.html
這個(gè)寫法是用原生JS寫的，考慮了很多兼容性問題，完全和新浪微博的回復(fù)效果一樣的功能。有興趣的童鞋可以仔細(xì)分析下代碼。
CSS代碼
#textarea display:block; margin:0auto; overflow:hidden; width:550px; font-size:14px; height:18px; line-height:24px; padding:2px;textarea{ outline:0none; border-color:rgba(82,168,236,0.8); box-shadow:inset01px3pxrgba(0,0,0,0.1),008pxrgba(82,168,236,0.6);}
JS代碼
/** * 文本框根據(jù)輸入內(nèi)容自適應(yīng)高度 * @param {HTMLElement} 輸入框元素 * @param {Number} 設(shè)置光標(biāo)與輸入框保持的距離(默認(rèn)0) * @param {Number} 設(shè)置最大高度(可選)var autoTextarea = function (elem, extra, maxHeight) { extra = extra || 0; var isFirefox = !!document.getBoxObjectFor || mozInnerScreenX in window, isOpera = !!window.opera !!window.opera.toString().indexOf( Opera ), addEvent = function (type, callback) { elem.addEventListener ? elem.addEventListener(type, callback, false) : elem.attachEvent( on + type, callback); getStyle = elem.currentStyle ? function (name) { var val = elem.currentStyle[name]; if (name === height val.search(/px/i) !== 1) { var rect = elem.getBoundingClientRect(); return rect.bottom - rect.top - parseFloat(getStyle( paddingTop )) - parseFloat(getStyle( paddingBottom )) + px  return val; } : function (name) { return getComputedStyle(elem, null)[name]; minHeight = parseFloat(getStyle( height  elem.style.resize = none  var change = function () { var scrollTop, height, padding = 0, style = elem.style; if (elem._length === elem.value.length) return; elem._length = elem.value.length; if (!isFirefox !isOpera) { padding = parseInt(getStyle( paddingTop )) + parseInt(getStyle( paddingBottom  scrollTop = document.body.scrollTop || document.documentElement.scrollTop; elem.style.height = minHeight + px  if (elem.scrollHeight minHeight) { if (maxHeight elem.scrollHeight maxHeight) { height = maxHeight - padding; style.overflowY = auto  } else { height = elem.scrollHeight - padding; style.overflowY = hidden  style.height = height + extra + px  scrollTop += parseInt(style.height) - elem.currHeight; document.body.scrollTop = scrollTop; document.documentElement.scrollTop = scrollTop; elem.currHeight = parseInt(style.height); addEvent( propertychange , change); addEvent( input , change); addEvent( focus , change); change();};
HTML代碼（寫在body里面的）
 textareaid= textarea placeholder= 回復(fù)內(nèi)容 /textarea  script  vartext=document.getElementById( textarea  autoTextarea(text);// /script 
3.textarea獲取內(nèi)容
方法一：JS獲取textarea中的內(nèi)容 用document.getElementById(v).value 就可以的。
比如：

 textarea id= abc name= t cols= 72 rows= 12 123456 /textarea  script var x=document.getElementById( abc ).value;/這個(gè)x的值就是獲取到的內(nèi)容alert(x); /script 
 方法二：
 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN  html  head  /head  body  textarea id= myText 這里是textarea內(nèi)容 /textarea  script type= text/javascript src= Js/jquery-1.7.js /script  script type= text/javascript alert( JS獲取方式： +document.getElementById( myText ).value);//JSalert( JQuery獲取方式： +$( #myText ).val());//Jquery /script  /body  /html 

4.textarea限制輸入字?jǐn)?shù)
實(shí)現(xiàn)textarea限制輸入字?jǐn)?shù)（包含中文只能輸入10個(gè)，全ASCII碼能夠輸入20個(gè)）
textarea稱文本域，又稱文本區(qū)，即有滾動(dòng)條的多行文本輸入控件，在網(wǎng)頁的提交表單中經(jīng)常用到。與單行文本框text控件不同，它不能通過maxlength屬性來限制字?jǐn)?shù)，為此必須尋求其他方法來加以限制以達(dá)到預(yù)設(shè)的需求。
通常的做法就是使用#腳本語言來實(shí)現(xiàn)對textarea文本域的字?jǐn)?shù)輸入限制，簡單而實(shí)用。假設(shè)我們有一個(gè)id為 txta1 的textarea文本區(qū)，我們可以通過以下代碼限制它的鍵盤輸入字?jǐn)?shù)為10個(gè)字（漢字或其他小角字符）：
＜script language= # type= text/ecmascript ＞ window.onload = function() document.getElementById( txta1 ).onkeydown = function()  if(this.value.length = 10)  event.returnValue = false; ＜/script＞
它的原理是通過對keydown（鍵盤鍵位按下）事件對指定id號(hào)的文本區(qū)進(jìn)行監(jiān)測，可以想象，它只能限制鍵盤輸入，如果用戶通過鼠標(biāo)右鍵粘貼剪切板中的文本，它無法控制字?jǐn)?shù)。
通過鍵盤輸入，以上文本區(qū)只能輸入10個(gè)字。但是，我們的目的并沒有達(dá)到！請隨便復(fù)制一些文本，試著用鼠標(biāo)右鍵粘貼，看看發(fā)生了什么。
你可以在網(wǎng)上找到類似上述的其他JS腳本，它們不管多么優(yōu)秀，其原理都是一樣的，通過對keydown、keyup或keypress之類的鍵盤鍵位操作事件來監(jiān)控文本區(qū)的輸入，無法防止鼠標(biāo)右鍵的粘貼，為此，如果一定要真正地限制textarea的字?jǐn)?shù)，我們還得為網(wǎng)頁加另一把鎖——禁用鼠標(biāo)右鍵，這無疑得付出額外的開銷，同時(shí)也可能是網(wǎng)頁制作者不一定愿意做的。其實(shí)，還有一個(gè)更簡單的方法，使用onpropertychange屬性。
onpropertychange可以用來判斷預(yù)定元素的value值，當(dāng)元素的value值發(fā)生變化時(shí)判斷事件就會(huì)被觸發(fā)，僅關(guān)心被監(jiān)測元素的value值，避開了輸入的來源，從而可以比較理想地達(dá)成我們的限制字?jǐn)?shù)這一目的。它屬于JS范疇，可以在表單方框區(qū)代表中嵌套使用，以下是代碼和效果樣式，可以像上面那樣測試輸入，你會(huì)發(fā)現(xiàn)它真正達(dá)到目的：不管用什么方式輸入，它只能輸入100個(gè)字（漢字或其他小解符號(hào)）：
代碼：
 textarea onpropertychange= if(value.length 100) value=value.substr(0,100) >
當(dāng)然，為了更為保險(xiǎn)，處理表單數(shù)據(jù)的后臺(tái)腳本程序還應(yīng)該對提交來的數(shù)據(jù)進(jìn)行再一次的檢測，如果字?jǐn)?shù)超出預(yù)設(shè)的數(shù)量則進(jìn)行相應(yīng)處理，這樣才達(dá)到真正限制字?jǐn)?shù)的目的。（完）
另外一種方法實(shí)現(xiàn)textarea限制輸入字?jǐn)?shù)（包含中文只能輸入10個(gè)，全ASCII碼能夠輸入20個(gè)）
 script function check() { var regC = /[^ -~]+/g; var regE = //D+/g; var str = t1.value; if (regC.test(str)){  t1.value = t1.value.substr(0,10); if(regE.test(str)){  t1.value = t1.value.substr(0,20);  /script  textarea maxlength= 10 id= t1 onkeyup= check();  /textarea 
 還有一種方式：
function textCounter(field, maxlimit) { if (field.value.length maxlimit){ field.value = field.value.substring(0, maxlimit); }else{ document.upbook.remLen.value = maxlimit - field.value.length; }
 textarea name=words cols=19 rows=5 >
 
title= The textarea width must less than 300 characters. 放在textarea 里面提示輸入最大字節(jié)數(shù)。
例如：
 textarea title= The textarea width must less than 300 characters. cols=50 rows=10 name= comment id= commentarea quot;LimitTextArea(this) onKeyUp= LimitTextArea(this) onkeypress= LimitTextArea(this) /textarea 
5.textarea 換行
最近碰到一個(gè)數(shù)據(jù)轉(zhuǎn)來轉(zhuǎn)去轉(zhuǎn)到Textrea里面是否能真正按行存放的問題，在這里總結(jié)一下：
問題描述：
比如get數(shù)據(jù)到一個(gè)TextArea里面，如“AAA BBB”，想把這段文字在TextArea里面真正按行存放，而不是顯示出來按行存放（所謂的真正按行存放就是，再把這個(gè)TextArea的數(shù)據(jù)post到另外一個(gè)頁面的Textarea里面仍是按行存放）
問題解決1：
一開始是提交數(shù)據(jù)的時(shí)候格式是AAA BR / BBB，但是這是顯示換行，其實(shí)在TextArea里面并不是真正按行存放的，因?yàn)檫@個(gè)時(shí)候再提交給另外一個(gè)TextArea的時(shí)候就是顯示AAABBB，而不是換行顯示了，因此僅僅是顯示按行存放而已
問題基礎(chǔ)知識(shí)：
HTML里面的換行是 BR / ,而TextArea的換行是/n
問題解決2：
先提交數(shù)據(jù)再使用Javascript對 BR / 和/n進(jìn)行替換
提交的時(shí)候仍是 BR / 作為分隔符
然后提交完畢以后
 script  //換行轉(zhuǎn)回車 var haha=document.getElementById( SendTextArea ).value; haha=haha.replace( br / , /n  document.getElementById( SendTextArea ).value=haha; /script 
6.textarea固定大小
TML 標(biāo)簽 textarea 在大部分瀏覽器中只要指定行（rows）和列（cols）屬性，就可以規(guī)定 textarea 的尺寸，大小就不會(huì)改變，不過更好的辦法是使用 CSS 的 height 和 width 屬性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖動(dòng)右下角圖標(biāo)改變大小。但是過分拖動(dòng)大小會(huì)影響頁面布局，使頁面變得不美觀。可以通過添加如下兩個(gè)樣式禁用拖動(dòng)，固定大小：
1：徹底禁用拖動(dòng)（推薦）
resize: none;
2：只是固定大小，右下角的拖動(dòng)圖標(biāo)仍在
width: 200px; height: 100px; max-width: 200px; max-height: 100px;
3：瀏覽器信息：
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.218 Safari/535.1
7.textarea value
最近在做一個(gè)小項(xiàng)目，才發(fā)現(xiàn)原來textarea中居然沒有value屬性。
 tr  th 姓名* /th  td span input type= text >
8.textarea placeholder
placeholder 屬性適用于以下的 input 類型：text, search, url, telephone, email 以及 password。
這個(gè)屬性是html5才有的新屬性，原來的HTML 4.01 與 HTML 5 之間的差異。
以上就是html中的textarea屬性大全(設(shè)置默認(rèn)值 高度自適應(yīng) 獲取內(nèi)容 限制輸入字?jǐn)?shù) placeholder)的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。