html中的textarea屬性大全(設定預設值 高度自適應 取得內容 限制輸入字數 placeholder)
- PHP中文网原創
- 2017-07-23 15:10:0630069瀏覽
1.textarea設定預設值
<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號的文本區進行監測，可以想像，它只能限制鍵盤輸入，如果用戶通過滑鼠右鍵粘貼剪切板中的文本，它無法控製字數。 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
BBB，但是这是显示换行，其实在TextArea里面并不是真正按行存放的，因为这个时候再提交给另外一个TextArea的时候就是显示AAABBB，而不是换行显示了，因此仅仅是显示按行存放而已
问题基础知识：
HTML里面的换行是
,而TextArea的换行是/n
问题解决2：
先提交数据再使用Javascript对
和/n进行替换
提交的时候仍是
作为分隔符
然后提交完毕以后
<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 属性适用于以下的 类型：text, search, url, telephone, email 以及 password。
这个属性是html5才有的新属性，原来的HTML 4.01 与 HTML 5 之间的差异。
以上是html中的textarea屬性大全(設定預設值 高度自適應 取得內容 限制輸入字數 placeholder)的詳細內容。更多資訊請關注PHP中文網其他相關文章！