1.textarea legt den Standardwert fest
<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="提交" >
Dieser Code legt ein Textfeld für den Textbereich fest und legt es fest zum Ausblenden
2. Textbereich ist sehr anpassungsfähig
Heute benötigen wir eine Seite, um auf Kommentare zu antworten. Die anfängliche Schnittstelle ist ein Feld mit nur einer Zeile . Dann habe ich darüber nachgedacht, wie ich diese Interaktion besser implementieren kann, und dann fiel mir ein, was Sina Weibo getan hat: Klicken Sie auf einen Kommentar und eine Zeile wird standardmäßig angezeigt. Wenn der Eingabetext eine Zeile überschreitet oder die Eingabetaste eingegeben wird, wird die Höhe des Kommentars angezeigt Das Eingabefeld ändert sich entsprechend, bis die Eingabe abgeschlossen ist. Ich hatte sofort das Gefühl, dass dieses Detail ganz gut gelungen ist und ich es nachahmen konnte. Im Folgenden finden Sie zwei Möglichkeiten, um eine hohe Anpassungsfähigkeit des Textbereichs zu erreichen. Eine besteht darin, div zur Simulation des Textbereichs zu verwenden, und die andere darin, JS zur Steuerung zu verwenden (wegen Browserkompatibilitätsproblemen ist das Schreiben daher problematischer). zum Aufstehen);
Methode 1: div simuliert den Textbereich des Textbereichs, um eine einfache Höhenanpassung zu erreichen
Da der Textbereich keine adaptive Höhe unterstützt, legen Sie einfach fest Höhe Oder nach der Anzahl der Zeilen werden im überschüssigen Teil Bildlaufleisten angezeigt, was unansehnlich aussieht.
Bei der Simulation mit DIV tritt zunächst das Problem auf: Wie implementiert man die Eingabefunktion von div?
Vielleicht ist dies das erste Mal, dass wir dieses Attribut contenteditable sehen. Wenn Sie beispielsweise contenteditable="true" zu einem gewöhnlichen Blockelement hinzufügen, wird die Bearbeitung aktiviert und der Cursor wird angezeigt. Beispiel:
<div contenteditable="true"></div>
Obwohl das contenteditable-Attribut in HTML5 Content ist, scheint der IE dieses Tag-Attribut schon seit langem zu unterstützen. Daher besteht kein Grund zur Sorge um die Kompatibilität.
CSS-Code
.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);
}Methode 2: Der Textbereich passt seine Höhe entsprechend dem Eingabeinhalt an
Demo-Adresse: http://www.xuanfengge.com/demo /201308/textarea/demo2.html
Diese Schreibmethode ist unter Berücksichtigung vieler Kompatibilitätsprobleme in nativem JS geschrieben und hat dieselbe Funktion wie der Antworteffekt von Sina Weibo. Interessierte Kinder können den Code sorgfältig analysieren.
CSS-Code
#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-Code
/**
* 文本框根据输入内容自适应高度
* @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-Code (im Textkörper geschrieben)
<textareaid="textarea"placeholder="回复内容"></textarea>
<script>
vartext=document.getElementById("textarea");
autoTextarea(text);//
调用
</script>3 . Textbereich ruft den Inhalt ab
Methode 1: JS ruft den Inhalt im Textbereich mithilfe von document.getElementById(v).value ab.
Zum Beispiel:
<textarea id="abc" name="t" cols="72" rows="12">123456</textarea>
<script>
var x=document.getElementById("abc").value;/这个x的值就是获取到的内容
alert(x);
</script>Methode 2:
<!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 begrenzt die Anzahl der Eingabezeichen
Implementiert Textarea, um die Anzahl der Eingabezeichen zu begrenzen (einschließlich Chinesisch, das nur 10 Zeichen eingeben kann, und vollständiger ASCII-Code, der 20 Zeichen eingeben kann)
textarea wird als Textbereich bezeichnet, auch Textbereich genannt, also ein mehrzeiliges Texteingabesteuerelement mit Bildlaufleisten, das häufig in Formularen zur Übermittlung von Webseiten verwendet wird. Im Gegensatz zur einzeiligen Textfeld-Textsteuerung kann die Anzahl der Wörter nicht über das Attribut „maxlength“ begrenzt werden. Aus diesem Grund müssen andere Methoden gefunden werden, um die Anzahl der Wörter zu begrenzen, um die voreingestellten Anforderungen zu erfüllen.
Der übliche Ansatz besteht darin, die #Skriptsprache zu verwenden, um die Anzahl der in das Textfeld „Textarea“ eingegebenen Wörter zu begrenzen, was einfach und praktisch ist. Angenommen, wir haben einen Textbereich mit der ID txta1. Wir können die Tastatureingabezeichen durch den folgenden Code auf 10 Zeichen (chinesische Zeichen oder andere Kleinwinkelzeichen) beschränken:
＜script language="#" type="text/ecmascript"＞
window.onload = function()
{
document.getElementById('txta1').onkeydown = function()
{
if(this.value.length >= 10)
event.returnValue = false;
}
}
＜/script＞Das Prinzip ist Das Keydown-Ereignis (Tastendruck auf der Tastatur) überwacht den Textbereich mit der angegebenen ID-Nummer. Wie Sie sich vorstellen können, kann es die Tastatureingabe nur einschränken. Wenn der Benutzer Text mit der rechten Maustaste in die Zwischenablage einfügt, kann die Nummer nicht gesteuert werden von Wörtern.
Eingabe über die Tastatur Im obigen Textbereich können nur 10 Zeichen eingegeben werden. Unser Ziel wurde jedoch nicht erreicht! Kopieren Sie einfach einen Text, fügen Sie ihn mit der rechten Maustaste ein und sehen Sie, was passiert.
Sie können im Internet andere JS-Skripte finden, die den oben genannten ähneln, egal wie gut sie sind, ihre Prinzipien sind die gleichen. Sie überwachen Tastaturtastenbetätigungsereignisse wie Tastendruck, Tastendruck. Die Eingabe im Textbereich kann das Einfügen mit der rechten Maustaste nicht verhindern. Wenn wir die Anzahl der Wörter im Textbereich wirklich begrenzen müssen, müssen wir der Webseite eine weitere Sperre hinzufügen – die Deaktivierung der rechten Maustaste wird zweifellos zusätzliche Kosten verursachen. Gleichzeitig kann es aber auch sein, dass der Ersteller der Webseite nicht unbedingt bereit ist, dies zu tun. Tatsächlich gibt es einen einfacheren Weg: die Verwendung des onpropertychange-Attributs.
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 之间的差异。
Das obige ist der detaillierte Inhalt vonVollständige Liste der Textbereichsattribute in HTML (Standardwert festlegen, höhenadaptiv, Inhalt abrufen, Anzahl der Eingabezeichen begrenzen, Platzhalter). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
