textarea默認值輸入框提示文字設(shè)置的方法
1.textarea設(shè)置默認值
<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è)置一個textarea文本框 并且設(shè)置為隱藏
2.textarea高度自適應(yīng)
今天需要些一個回復(fù)評論的頁面，設(shè)計師給的初始界面就是一個只有一行的框。然后當時就想這個交互該怎么實現(xiàn)比較好，然后想起了新浪微博的做法：點擊評論，默認顯示一行，當輸入的文字超過一行或者輸入Enter時，輸入框的高度會隨著改變，直到輸入完畢。頓時覺得這個細節(jié)做得挺不錯的，可以效仿下。下面分享2種實現(xiàn)textarea高度自適應(yīng)的做法，一種是用div來模擬textarea來實現(xiàn)的，用CSS控制樣式，不用js；另一種是利用JS控制的（因為存在瀏覽器兼容問題，所以寫起來比較麻煩）；
方法一：div模擬textarea文本域輕松實現(xiàn)高度自適應(yīng)
因為textarea不支持自適應(yīng)高度，就是定好高度或者是行數(shù)之后，超出部分就會顯示滾動條，看起來不美觀。
而用DIV來模擬時，首先遇到的問題是：div怎么實現(xiàn)輸入功能？
可能我們還是第一次見到這個屬性contenteditable，如一個普通的block元素上加個contenteditable="true"就實現(xiàn)編輯，出現(xiàn)光標了。如
1 | <div contenteditable="true"></div> |
contenteditable屬性雖是HTML5里面的內(nèi)容，但是IE似乎老早就支持此標簽屬性了。所以，兼容性方面還是不用太擔心的。
CSS代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .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
這個寫法是用原生JS寫的，考慮了很多兼容性問題，完全和新浪微博的回復(fù)效果一樣的功能。有興趣的童鞋可以仔細分析下代碼。
CSS代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #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代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | /** * 文本框根據(jù)輸入內(nèi)容自適應(yīng)高度 * @param {HTMLElement} 輸入框元素 * @param {Number} 設(shè)置光標與輸入框保持的距離(默認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里面的）
1 2 3 4 5 6 | <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 就可以的。
比如：
1 2 3 4 5 | <textarea id="abc" name="t" cols="72" rows="12">123456</textarea> <script> var x=document.getElementById("abc").value;/這個x的值就是獲取到的內(nèi)容 alert(x); </script> |
方法二：
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!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限制輸入字數(shù)
實現(xiàn)textarea限制輸入字數(shù)（包含中文只能輸入10個，全ASCII碼能夠輸入20個）
textarea稱文本域，又稱文本區(qū)，即有滾動條的多行文本輸入控件，在網(wǎng)頁的提交表單中經(jīng)常用到。與單行文本框text控件不同，它不能通過maxlength屬性來限制字數(shù)，為此必須尋求其他方法來加以限制以達到預(yù)設(shè)的需求。
通常的做法就是使用#腳本語言來實現(xiàn)對textarea文本域的字數(shù)輸入限制，簡單而實用。假設(shè)我們有一個id為 txta1 的textarea文本區(qū)，我們可以通過以下代碼限制它的鍵盤輸入字數(shù)為10個字（漢字或其他小角字符）：
1 2 3 4 5 6 7 8 9 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號的文本區(qū)進行監(jiān)測，可以想象，它只能限制鍵盤輸入，如果用戶通過鼠標右鍵粘貼剪切板中的文本，它無法控制字數(shù)。
通過鍵盤輸入，以上文本區(qū)只能輸入10個字。但是，我們的目的并沒有達到！請隨便復(fù)制一些文本，試著用鼠標右鍵粘貼，看看發(fā)生了什么。
你可以在網(wǎng)上找到類似上述的其他JS腳本，它們不管多么優(yōu)秀，其原理都是一樣的，通過對keydown、keyup或keypress之類的鍵盤鍵位操作事件來監(jiān)控文本區(qū)的輸入，無法防止鼠標右鍵的粘貼，為此，如果一定要真正地限制textarea的字數(shù)，我們還得為網(wǎng)頁加另一把鎖——禁用鼠標右鍵，這無疑得付出額外的開銷，同時也可能是網(wǎng)頁制作者不一定愿意做的。其實，還有一個更簡單的方法，使用onpropertychange屬性。
onpropertychange可以用來判斷預(yù)定元素的value值，當元素的value值發(fā)生變化時判斷事件就會被觸發(fā)，僅關(guān)心被監(jiān)測元素的value值，避開了輸入的來源，從而可以比較理想地達成我們的限制字數(shù)這一目的。它屬于JS范疇，可以在表單方框區(qū)代表中嵌套使用，以下是代碼和效果樣式，可以像上面那樣測試輸入，你會發(fā)現(xiàn)它真正達到目的：不管用什么方式輸入，它只能輸入100個字（漢字或其他小解符號）：
代碼：
1 | <textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea> |
當然，為了更為保險，處理表單數(shù)據(jù)的后臺腳本程序還應(yīng)該對提交來的數(shù)據(jù)進行再一次的檢測，如果字數(shù)超出預(yù)設(shè)的數(shù)量則進行相應(yīng)處理，這樣才達到真正限制字數(shù)的目的。（完）
另外一種方法實現(xiàn)textarea限制輸入字數(shù)（包含中文只能輸入10個，全ASCII碼能夠輸入20個）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
還有一種方式：
1 2 3 4 5 6 7 | 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; } } |
1 2 3 4 5 6 7 8 9 10 | <textarea name=words cols=19 rows=5 class=input1 onPropertyChange= "textCounter(upbook.words, 50) "> textarea> 剩余字數(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ù)。
例如：
1 | <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 換行
最近碰到一個數(shù)據(jù)轉(zhuǎn)來轉(zhuǎn)去轉(zhuǎn)到Textrea里面是否能真正按行存放的問題，在這里總結(jié)一下：
問題描述：
比如get數(shù)據(jù)到一個TextArea里面，如“AAA BBB”，想把這段文字在TextArea里面真正按行存放，而不是顯示出來按行存放（所謂的真正按行存放就是，再把這個TextArea的數(shù)據(jù)post到另外一個頁面的Textarea里面仍是按行存放）
問題解決1：
一開始是提交數(shù)據(jù)的時候格式是AAA<BR />BBB，但是這是顯示換行，其實在TextArea里面并不是真正按行存放的，因為這個時候再提交給另外一個TextArea的時候就是顯示AAABBB，而不是換行顯示了，因此僅僅是顯示按行存放而已
問題基礎(chǔ)知識：
HTML里面的換行是<BR />,而TextArea的換行是/n
問題解決2：
先提交數(shù)據(jù)再使用Javascript對<BR />和/n進行替換
提交的時候仍是<BR />作為分隔符
然后提交完畢以后
1 2 3 4 5 6 | <script> //換行轉(zhuǎn)回車 var haha=document.getElementById("SendTextArea").value; haha=haha.replace('<br />','/n'); document.getElementById("SendTextArea").value=haha; </script> |
6.textarea固定大小
TML 標簽 textarea 在大部分瀏覽器中只要指定行（rows）和列（cols）屬性，就可以規(guī)定 textarea 的尺寸，大小就不會改變，不過更好的辦法是使用 CSS 的 height 和 width 屬性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖動右下角圖標改變大小。但是過分拖動大小會影響頁面布局，使頁面變得不美觀?？梢酝ㄟ^添加如下兩個樣式禁用拖動，固定大?。?/p>
1：徹底禁用拖動（推薦）
1 | resize: none; |
2：只是固定大小，右下角的拖動圖標仍在
1 2 3 4 | width: 200px; height: 100px; max-width: 200px; max-height: 100px; |
3：瀏覽器信息：
1 | Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.218 Safari/535.1 |
7.textarea value
最近在做一個小項目，才發(fā)現(xiàn)原來textarea中居然沒有value屬性。
1 2 3 4 5 6 | <tr> <th>姓名*</th> <td><span><input type="text" class="TextBox" id="xm" name="xm" /></span></td> </tr> <!--平時用<input>標簽比較多，一般在其內(nèi)添加個value屬性就可以獲取到值，但是在<textarea>標簽中添加該屬性卻獲取不到相應(yīng)的值，具體解決的辦法是用以下的格式即可：--> <textarea>(在這里添加內(nèi)容)</textarea> |
8.textarea placeholder
placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。
這個屬性是html5才有的新屬性，原來的HTML 4.01 與 HTML 5 之間的差異。
實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>解決textarea輸入框提示文字，必須添加默認內(nèi)容</title>
<style type="text/css">
body{font-size:12px;}
p,div{margin:0;padding:0}
.textarea{
width:350px;height:80px;position:absolute;background:none;z-index:9
}
.note{
position:absolute;line-height:20px;padding:3px 5px;
}
</style>
</head>
<body>
<div style="position:relative;">
<textarea class="textarea" onfocus="document.getElementById('note').style.display='none'" onblur="if(value=='')document.getElementById('note').style.display='block'"></textarea>
<div id="note" class="note">
<font color="#777">在這里寫入你對服務(wù)商的額外要求，服務(wù)商等級，好評率等</font>
</div>
</div>
</body>
</html>實例二
textarea顯示默認值
點擊不顯示默認值，鼠標離開如果沒有內(nèi)容就顯示默認值，如果有內(nèi)容就顯示內(nèi)容。
<textarea class="area" onfocus="if(value=='請輸入具體內(nèi)容'){value=''}" onblur="if (value ==''){value='請輸入具體內(nèi)容'}">請輸入具體內(nèi)容</textarea>以上就是html中的textarea屬性大全(設(shè)置默認值 高度自適應(yīng) 獲取內(nèi)容 限制輸入字數(shù) placeholder)的詳細內(nèi)容
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點擊進入論壇
