html中的textarea屬性大全(設(shè)置默認(rèn)值 高度自適應(yīng) 取得內(nèi)容 局限輸入字?jǐn)?shù) placeholder)

<span style="font-family: Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255); ">
HTML:</span><form action="test" name="myForm" onsubmit="set()">

<textarea rows="0" cols="0" name="jsonHidden" readonly="readonly" style="display:none;"></textarea>

<input type="submit" value="提交" >

此段代碼設(shè)置一個(gè)textarea文本框 并且設(shè)置為隱藏

2.textarea高度自適應(yīng)

今天需要些一個(gè)回復(fù)評(píng)論的頁(yè)面，設(shè)計(jì)師給的初始界面就是一個(gè)只有一行的框。然后當(dāng)時(shí)就想這個(gè)交互該怎么實(shí)現(xiàn)比較好，然后想起了新浪微博的做法：點(diǎn)擊評(píng)論，默認(rèn)顯示一行，當(dāng)輸入的文字超過(guò)一行或者輸入Enter時(shí)，輸入框的高度會(huì)隨著改變，直到輸入完畢。頓時(shí)覺得這個(gè)細(xì)節(jié)做得挺不錯(cuò)的，可以效仿下。下面分享2種實(shí)現(xiàn)textarea高度自適應(yīng)的做法，一種是用div來(lái)模擬textarea來(lái)實(shí)現(xiàn)的，用CSS控制樣式，不用js；另一種是利用JS控制的（因?yàn)榇嬖跒g覽器兼容問(wèn)題，所以寫起來(lái)比較麻煩）；

方法一：div模擬textarea文本域輕松實(shí)現(xiàn)高度自適應(yīng)

因?yàn)閠extarea不支持自適應(yīng)高度，就是定好高度或者是行數(shù)之后，超出部分就會(huì)顯示滾動(dòng)條，看起來(lái)不美觀。

而用DIV來(lái)模擬時(shí)，首先遇到的問(wèn)題是：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寫的，考慮了很多兼容性問(wèn)題，完全和新浪微博的回復(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);//
 調(diào)用
    </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);//JS
alert("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)頁(yè)的提交表單中經(jīng)常用到。與單行文本框text控件不同，它不能通過(guò)maxlength屬性來(lái)限制字?jǐn)?shù)，為此必須尋求其他方法來(lái)加以限制以達(dá)到預(yù)設(shè)的需求。

通常的做法就是使用#腳本語(yǔ)言來(lái)實(shí)現(xiàn)對(duì)textarea文本域的字?jǐn)?shù)輸入限制，簡(jiǎn)單而實(shí)用。假設(shè)我們有一個(gè)id為 txta1 的textarea文本區(qū)，我們可以通過(guò)以下代碼限制它的鍵盤輸入字?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＞

它的原理是通過(guò)對(duì)keydown（鍵盤鍵位按下）事件對(duì)指定id號(hào)的文本區(qū)進(jìn)行監(jiān)測(cè)，可以想象，它只能限制鍵盤輸入，如果用戶通過(guò)鼠標(biāo)右鍵粘貼剪切板中的文本，它無(wú)法控制字?jǐn)?shù)。

通過(guò)鍵盤輸入，以上文本區(qū)只能輸入10個(gè)字。但是，我們的目的并沒有達(dá)到！請(qǐng)隨便復(fù)制一些文本，試著用鼠標(biāo)右鍵粘貼，看看發(fā)生了什么。

你可以在網(wǎng)上找到類似上述的其他JS腳本，它們不管多么優(yōu)秀，其原理都是一樣的，通過(guò)對(duì)keydown、keyup或keypress之類的鍵盤鍵位操作事件來(lái)監(jiān)控文本區(qū)的輸入，無(wú)法防止鼠標(biāo)右鍵的粘貼，為此，如果一定要真正地限制textarea的字?jǐn)?shù)，我們還得為網(wǎng)頁(yè)加另一把鎖——禁用鼠標(biāo)右鍵，這無(wú)疑得付出額外的開銷，同時(shí)也可能是網(wǎng)頁(yè)制作者不一定愿意做的。其實(shí)，還有一個(gè)更簡(jiǎn)單的方法，使用onpropertychange屬性。

onpropertychange可以用來(lái)判斷預(yù)定元素的value值，當(dāng)元素的value值發(fā)生變化時(shí)判斷事件就會(huì)被觸發(fā)，僅關(guān)心被監(jiān)測(cè)元素的value值，避開了輸入的來(lái)源，從而可以比較理想地達(dá)成我們的限制字?jǐn)?shù)這一目的。它屬于JS范疇，可以在表單方框區(qū)代表中嵌套使用，以下是代碼和效果樣式，可以像上面那樣測(cè)試輸入，你會(huì)發(fā)現(xiàn)它真正達(dá)到目的：不管用什么方式輸入，它只能輸入100個(gè)字（漢字或其他小解符號(hào)）：

代碼：

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

當(dāng)然，為了更為保險(xiǎn)，處理表單數(shù)據(jù)的后臺(tái)腳本程序還應(yīng)該對(duì)提交來(lái)的數(shù)據(jù)進(jìn)行再一次的檢測(cè)，如果字?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 class=input1 onPropertyChange= "textCounter(upbook.words, 50) "> textarea> 剩余字?jǐn)?shù): <input name=remLen type=text id= "remLen " style= "background-color: #D4D0C8; border: 0; color: red " value=50 size=3 maxlength=3 readonly>
 
 
function LimitTextArea(field){  
   maxlimit=200;    
    if (field.value.length > maxlimit)     
     field.value = field.value.substring(0, maxlimit);           
}
<textarea cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" >
</textarea>

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" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

5.textarea 換行

最近碰到一個(gè)數(shù)據(jù)轉(zhuǎn)來(lái)轉(zhuǎn)去轉(zhuǎn)到Textrea里面是否能真正按行存放的問(wèn)題，在這里總結(jié)一下：

問(wèn)題描述：

比如get數(shù)據(jù)到一個(gè)TextArea里面，如“AAA BBB”，想把這段文字在TextArea里面真正按行存放，而不是顯示出來(lái)按行存放（所謂的真正按行存放就是，再把這個(gè)TextArea的數(shù)據(jù)post到另外一個(gè)頁(yè)面的Textarea里面仍是按行存放）

問(wèn)題解決1：

一開始是提交數(shù)據(jù)的時(shí)候格式是AAA<BR />BBB，但是這是顯示換行，其實(shí)在TextArea里面并不是真正按行存放的，因?yàn)檫@個(gè)時(shí)候再提交給另外一個(gè)TextArea的時(shí)候就是顯示AAABBB，而不是換行顯示了，因此僅僅是顯示按行存放而已

問(wèn)題基礎(chǔ)知識(shí)：

HTML里面的換行是<BR />,而TextArea的換行是/n

問(wèn)題解決2：

先提交數(shù)據(jù)再使用Javascript對(duì)<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ì)改變，不過(guò)更好的辦法是使用 CSS 的 height 和 width 屬性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖動(dòng)右下角圖標(biāo)改變大小。但是過(guò)分拖動(dòng)大小會(huì)影響頁(yè)面布局，使頁(yè)面變得不美觀�？梢酝ㄟ^(guò)添加如下兩個(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)原來(lái)textarea中居然沒有value屬性。

<tr>    
  <th>姓名*</th>       
  <td><span><input type="text" class="TextBox" id="xm" name="xm" /></span></td>
</tr>
<!--平時(shí)用<input>標(biāo)簽比較多，一般在其內(nèi)添加個(gè)value屬性就可以獲取到值，但是在<textarea>標(biāo)簽中添加該屬性卻獲取不到相應(yīng)的值，具體解決的辦法是用以下的格式即可：-->
<textarea>(在這里添加內(nèi)容)</textarea>

8.textarea placeholder

placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。
這個(gè)屬性是html5才有的新屬性，原來(lái)的HTML 4.01 與 HTML 5 之間的差異。

以上就是html中的textarea屬性大全(設(shè)置默認(rèn)值 高度自適應(yīng) 獲取內(nèi)容 限制輸入字?jǐn)?shù) placeholder)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！