textareaがmaxlengthattribute_javascriptスキルで単語数を制限できない問題の解決策-jsチュートリアル-php.cn

textareaがmaxlengthattribute_javascriptスキルで単語数を制限できない問題の解決策

WBOY

リリース： 2016-05-16 16:38:19

オリジナル

1864 人が閲覧しました

テキストエリアはテキストエリアとも呼ばれ、スクロールバーを備えた複数行のテキスト入力コントロールであり、Webページの送信フォームでよく使用されます。単一行のテキストボックスのテキストコントロールとは異なり、maxlength 属性を使用して単語数を制限することはできません。このため、事前に設定された要件を満たすために他の方法を見つけて制限する必要があります。

通常のアプローチは、#scripting 言語を使用して textarea テキストフィールドに入力される単語数を制限することです。これはシンプルで実用的です。 ID が txta1 のテキストエリアがあるとします。次のコードを使用して、キーボード入力文字を 10 文字 (漢字またはその他の小角文字) に制限できます。

<script language="#" type="text/ecmascript"> 
window.onload = function() 
{ 
document.getElementById('txta1').onkeydown = function() 
{ 
if(this.value.length >= 10) 
event.returnValue = false; 
} 
} 
</script>

ログイン後にコピー

その原理は、キーダウン (キーボードのキーを押す) イベントを通じて、指定された ID 番号を持つテキスト領域を監視することです。ご想像のとおり、ユーザーが右マウスを使用してクリップボードにテキストを貼り付けた場合にのみキーボード入力を制限できます。ボタンを使用すると、単語数を制御できません。

キーボードから入力する場合、上記のテキストエリアには 10 文字のみ入力できます。しかし、目標は達成されませんでした。テキストをコピーし、マウスの右ボタンで貼り付けてみて、何が起こるかを確認してください。

上記と同様の他の JS スクリプトがインターネット上にありますが、どれだけ優れていても、キーダウン、キーアップ、キー押下などのキーボードのキー操作イベントを通じてテキスト領域への入力を監視するものは同じです。このため、テキストエリア内の単語数を本当に制限する必要がある場合は、Web ページに別のロックを追加する必要があります。これには間違いなく追加のコストがかかります。また、Web ページの作成者にとっても問題になる可能性があります。実際には、onpropertychange 属性を使用する、より簡単な方法があります。

onpropertychange を使用すると、要素の値が変更されると、入力のソースを回避して、監視対象の要素の値のみが考慮されます。理想的には文字数制限を満たすことができます。これは JS のカテゴリに属し、フォームボックス領域の代表的なコードとエフェクトのスタイルで使用できます。上記のように入力をテストすると、実際に目的を達成していることがわかります。メソッドを入力に使用します。入力できる文字数は 100 文字のみです (漢字またはその他の漢字):

コード:

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></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="テキストエリアの幅は 300 文字未満である必要があります。" テキストエリアに配置すると、最大バイト数の入力を求められます。

例:

<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>

ログイン後にコピー