入力文字数を制限するテキストエリアを実装するJavaScriptのサンプルコード

この記事では主にJSで入力単語数を制限するtextareaを実装する原理と方法を紹介します。非常に良い参考値ですので、下のエディタで見てみましょう

入力文字数を制限するためにtextareaを実装します(中国語含む、10文字のみ入力可能、フルASCIIコードは20文字入力可能)

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

通常のアプローチは、#scripting language を使用して、textarea テキスト フィールドに入力される単語の数を制限することです。これはシンプルで実用的です。 ID が txta1 の textarea テキスト領域があるとします。次のコードを使用して、そのキーボード入力文字を 10 文字 (漢字またはその他の小角文字) に制限できます。 keydown ( (キーボード キーが押された) イベントは、指定された ID 番号を持つテキスト領域を監視します。ご想像のとおり、これはキーボード入力を制限することしかできません。ユーザーがマウスの右ボタンを使用してテキストをクリップボードに貼り付ける場合、テキスト領域の数は制御できません。言葉。

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

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

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

コード:

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

もちろん、より安全にするために、フォーム データを処理するバックグラウンド スクリプトまた、送信されたデータを再度確認する必要があります。単語数が事前に設定された数を超えている場合は、実際に単語数を制限するという目的を達成するために、それに応じて処理されます。 （了）

テキストエリアの入力文字数を制限する別の方法（漢字10文字、フルASCIIコード20文字のみを含む）

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

別の方法もあります:

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

残り文字数Words:

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>

title="テキストエリアの幅は 300 文字未満である必要があります。" テキストエリアに配置すると、最大バイト数の入力を求められます。

例:

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

以上が入力文字数を制限するテキストエリアを実装するJavaScriptのサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。