ホームページ > 記事 > ウェブフロントエンド > HTML の textarea 属性の完全なリスト (デフォルト値の設定、高さの適応、コンテンツの取得、入力文字数の制限、プレースホルダー)
HTML の textarea 属性の完全なリスト (デフォルト値の設定、高さの適応、コンテンツの取得、入力文字数の制限、プレースホルダー)
- PHP中文网オリジナル
- 2017-07-23 15:10:0629987ブラウズ
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は適応性が高くなります
今日はコメントに返信するページが必要です、デザイナー 与えられた初期インターフェイスは 1 行だけのボックスです。そこで、このインタラクションをより適切に実装する方法を考えていたとき、Sina Weibo が行ったことを思い出しました。コメントをクリックすると、入力テキストが 1 行を超えるか Enter キーを入力すると、デフォルトで 1 行が表示されます。入力が完了するまで、入力ボックスはそれに応じて変化します。このディテールは非常によくできていて、真似できそうだとすぐに感じました。以下に、textarea の高い適応性を実現する 2 つの方法を示します。1 つは、div を使用して textarea をシミュレートし、CSS を使用して js を使用せずにスタイルを制御する方法です (ブラウザーの互換性の問題があるため、記述するのはさらに面倒です)。立ち上がる);
方法 1: div は、高さの適応を簡単に達成するために textarea テキスト フィールドをシミュレートします
textarea は高さの適応をサポートしていないため、つまり、高さまたは行数を設定した後、スクロール バー余分な部分に表示されてしまい見栄えが悪くなります。
DIV を使用してシミュレーションする場合、最初に遭遇する問題は、入力関数を div に実装する方法です。
この属性 contenteditable を見たのはこれが初めてかもしれません。たとえば、通常のブロック要素に 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);
}方法 2: テキスト ボックス textarea は入力コンテンツに応じて高さを調整します
デモデモのアドレス: 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コード(本文に記述)
<textareaid="textarea"placeholder="回复内容"></textarea>
<script>
vartext=document.getElementById("textarea");
autoTextarea(text);//
调用
</script>3. Textareaでコンテンツを取得する
方法1: JSはdocument.getElementById(v)を使用してtextareaのコンテンツを取得します。 .値は問題ありません。
例:
<textarea id="abc" name="t" cols="72" rows="12">123456</textarea>
<script>
var x=document.getElementById("abc").value;/这个x的值就是获取到的内容
alert(x);
</script>方法 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 が入力文字数を制限する
textarea が入力文字数を制限することを認識します (中国語を含む、10 文字のみ入力可能) 、完全な ASCII コードは 20 個入力できます)
textarea はテキストエリアとも呼ばれ、スクロールバーを備えた複数行のテキスト入力コントロールであり、Web ページの送信フォームでよく使用されます。単一行のテキスト ボックスのテキスト コントロールとは異なり、maxlength 属性を使用して単語数を制限することはできません。このため、事前に設定された要件を満たすように制限する他の方法を見つける必要があります。
通常のアプローチは、#scripting language を使用して、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＞ 原則は、キーダウン (キーボード) を押すことです。 key) (下) このイベントは、指定された ID 番号を持つテキスト領域を監視します。ご想像のとおり、ユーザーがマウスの右ボタンを使用してクリップボードにテキストを貼り付ける場合、イベントはキーボード入力を制限することしかできません。言葉。
キーボードから入力すると、上記のテキストエリアに10文字のみ入力できます。しかし、目標は達成されませんでした。テキストをコピーし、マウスの右ボタンで貼り付けてみて、何が起こるかを確認してください。
上記と同様の他の JS スクリプトがインターネット上にありますが、どれだけ優れていても、キーダウン、キーアップ、キー押下などのキーボードのキー操作イベントを通じてテキスト領域への入力を監視するものは同じです。このため、テキストエリア内の単語数を本当に制限する必要がある場合は、Web ページに別のロックを追加する必要があります。これには間違いなく追加のコストがかかります。また、Web ページの作成者にとっても問題になる可能性があります。実際には、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
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 属性の完全なリスト (デフォルト値の設定、高さの適応、コンテンツの取得、入力文字数の制限、プレースホルダー)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。