html中的textarea属性大全(设置默认值 高度自适应 获取内容 限制输入字数 placeholder)
- PHP中文网原创
- 2017-07-23 15:10:0630048浏览
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号的文本区进行监测，可以想象，它只能限制键盘输入，如果用户通过鼠标右键粘贴剪切板中的文本，它无法控制字数。
通过键盘输入，以上文本区只能输入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：
一开始是提交数据的时候格式是AAAfde1d9378415ca5fe4c9bb67e6cfdb81BBB，但是这是显示换行，其实在TextArea里面并不是真正按行存放的，因为这个时候再提交给另外一个TextArea的时候就是显示AAABBB，而不是换行显示了，因此仅仅是显示按行存放而已
问题基础知识：
HTML里面的换行是fde1d9378415ca5fe4c9bb67e6cfdb81,而TextArea的换行是/n
问题解决2：
先提交数据再使用Javascript对fde1d9378415ca5fe4c9bb67e6cfdb81和/n进行替换
提交的时候仍是fde1d9378415ca5fe4c9bb67e6cfdb81作为分隔符
然后提交完毕以后
<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 属性适用于以下的 d5fd7aea971a85678ba271703566ebfd 类型：text, search, url, telephone, email 以及 password。
这个属性是html5才有的新属性，原来的HTML 4.01 与 HTML 5 之间的差异。
以上是html中的textarea属性大全(设置默认值 高度自适应 获取内容 限制输入字数 placeholder)的详细内容。更多信息请关注PHP中文网其他相关文章！