html中的textarea屬性大全(設置默認值 高度自適應 取得內容 局限輸入字數 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="提交" >

此段代碼設置一個textarea文本框 并且設置為隱藏

2.textarea高度自適應

今天需要些一個回復評論的頁面，設計師給的初始界面就是一個只有一行的框。然后當時就想這個交互該怎么實現比較好，然后想起了新浪微博的做法：點擊評論，默認顯示一行，當輸入的文字超過一行或者輸入Enter時，輸入框的高度會隨著改變，直到輸入完畢。頓時覺得這個細節做得挺不錯的，可以效仿下。下面分享2種實現textarea高度自適應的做法，一種是用div來模擬textarea來實現的，用CSS控制樣式，不用js；另一種是利用JS控制的（因為存在瀏覽器兼容問題，所以寫起來比較麻煩）；

方法一：div模擬textarea文本域輕松實現高度自適應

因為textarea不支持自適應高度，就是定好高度或者是行數之后，超出部分就會顯示滾動條，看起來不美觀。

而用DIV來模擬時，首先遇到的問題是：div怎么實現輸入功能？

可能我們還是第一次見到這個屬性contenteditable，如一個普通的block元素上加個contenteditable="true"就實現編輯，出現光標了。如

<div contenteditable="true"></div>

contenteditable屬性雖是HTML5里面的內容，但是IE似乎老早就支持此標簽屬性了。所以，兼容性方面還是不用太擔心的。

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根據輸入內容自適應高度

demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo2.html

這個寫法是用原生JS寫的，考慮了很多兼容性問題，完全和新浪微博的回復效果一樣的功能。有興趣的童鞋可以仔細分析下代碼。

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代碼

/**
 * 文本框根據輸入內容自適應高度
 * @param                {HTMLElement}        輸入框元素
 * @param                {Number}                設置光標與輸入框保持的距離(默認0)
 * @param                {Number}                設置最大高度(可選)
 */
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="回復內容"></textarea>
    <script>
        vartext=document.getElementById("textarea");
        autoTextarea(text);//
 調用
    </script>

3.textarea獲取內容

方法一：JS獲取textarea中的內容 用document.getElementById(v).value 就可以的。

比如：

<textarea id="abc" name="t" cols="72" rows="12">123456</textarea>
<script>
var x=document.getElementById("abc").value;/這個x的值就是獲取到的內容
alert(x);
</script>

方法二：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<textarea id='myText'>這里是textarea內容</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限制輸入字數

實現textarea限制輸入字數（包含中文只能輸入10個，全ASCII碼能夠輸入20個）

textarea稱文本域，又稱文本區，即有滾動條的多行文本輸入控件，在網頁的提交表單中經常用到。與單行文本框text控件不同，它不能通過maxlength屬性來限制字數，為此必須尋求其他方法來加以限制以達到預設的需求。

通常的做法就是使用#腳本語言來實現對textarea文本域的字數輸入限制，簡單而實用。假設我們有一個id為 txta1 的textarea文本區，我們可以通過以下代碼限制它的鍵盤輸入字數為10個字（漢字或其他小角字符）：

＜script language="#" type="text/ecmascript"＞ 
window.onload = function() 
{ 
document.getElementById('txta1').onkeydown = function() 
{    
    if(this.value.length >= 10) 
      event.returnValue = false; 
} 
} 
＜/script＞

它的原理是通過對keydown（鍵盤鍵位按下）事件對指定id號的文本區進行監測，可以想象，它只能限制鍵盤輸入，如果用戶通過鼠標右鍵粘貼剪切板中的文本，它無法控制字數。

通過鍵盤輸入，以上文本區只能輸入10個字。但是，我們的目的并沒有達到！請隨便復制一些文本，試著用鼠標右鍵粘貼，看看發生了什么。

你可以在網上找到類似上述的其他JS腳本，它們不管多么優秀，其原理都是一樣的，通過對keydown、keyup或keypress之類的鍵盤鍵位操作事件來監控文本區的輸入，無法防止鼠標右鍵的粘貼，為此，如果一定要真正地限制textarea的字數，我們還得為網頁加另一把鎖——禁用鼠標右鍵，這無疑得付出額外的開銷，同時也可能是網頁制作者不一定愿意做的。其實，還有一個更簡單的方法，使用onpropertychange屬性。

onpropertychange可以用來判斷預定元素的value值，當元素的value值發生變化時判斷事件就會被觸發，僅關心被監測元素的value值，避開了輸入的來源，從而可以比較理想地達成我們的限制字數這一目的。它屬于JS范疇，可以在表單方框區代表中嵌套使用，以下是代碼和效果樣式，可以像上面那樣測試輸入，你會發現它真正達到目的：不管用什么方式輸入，它只能輸入100個字（漢字或其他小解符號）：

代碼：

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

當然，為了更為保險，處理表單數據的后臺腳本程序還應該對提交來的數據進行再一次的檢測，如果字數超出預設的數量則進行相應處理，這樣才達到真正限制字數的目的。（完）

另外一種方法實現textarea限制輸入字數（包含中文只能輸入10個，全ASCII碼能夠輸入20個）

<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> 剩余字數: <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 里面提示輸入最大字節數。

例如：

<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 換行

最近碰到一個數據轉來轉去轉到Textrea里面是否能真正按行存放的問題，在這里總結一下：

問題描述：

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

問題解決1：

一開始是提交數據的時候格式是AAA<BR />BBB，但是這是顯示換行，其實在TextArea里面并不是真正按行存放的，因為這個時候再提交給另外一個TextArea的時候就是顯示AAABBB，而不是換行顯示了，因此僅僅是顯示按行存放而已

問題基礎知識：

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

問題解決2：

先提交數據再使用Javascript對<BR />和/n進行替換

提交的時候仍是<BR />作為分隔符

然后提交完畢以后

 <script>
         //換行轉回車
         var haha=document.getElementById("SendTextArea").value;
         haha=haha.replace('<br />','/n');
         document.getElementById("SendTextArea").value=haha;
 </script>

6.textarea固定大小

TML 標簽 textarea 在大部分瀏覽器中只要指定行（rows）和列（cols）屬性，就可以規定 textarea 的尺寸，大小就不會改變，不過更好的辦法是使用 CSS 的 height 和 width 屬性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖動右下角圖標改變大小。但是過分拖動大小會影響頁面布局，使頁面變得不美觀。可以通過添加如下兩個樣式禁用拖動，固定大�。�

1：徹底禁用拖動（推薦）

resize: none;

2：只是固定大小，右下角的拖動圖標仍在

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

最近在做一個小項目，才發現原來textarea中居然沒有value屬性。

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

8.textarea placeholder

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

以上就是html中的textarea屬性大全(設置默認值 高度自適應 獲取內容 限制輸入字數 placeholder)的詳細內容，更多請關注php中文網其它相關文章！