SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [入力文字数の制限]

入力文字数の制限

機能

テキストエリアの入力文字数を制限するためのスクリプトです。制限数を超えた場合アラートを表示し、修正を促すことも可能です。 SUBMITされた後にチェックするので、一時的には制限数以上の入力は可能です。

テキストエリアのみではなく、テキストボックスなどにも使用可能です。

利用方法

HEAD部分にスクリプトを記述します。 BODY部分には、フォームを必要数設置します。フォームのテキストボックスの名称（name,id属性値）はそのままにするか、或いは変更した場合は、スクリプト側も同時に変更する必要があります。

改造方法

入力を許容する文字数を設定できます。

入力許容最大文字数: 「MAXLENGTH」を変更します。初期は２０文字に設定しています。

対応ブラウザ

IE4,IE5,NN4,N6

サンプル

［サンプルを見る］［ダウンロード］

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>入力文字数の制限</title>

<script language="javascript" type="text/javascript">
<!--

var MAXLENGTH = 20;		//入力許容最大文字数

function tareachk(frm){
	var tmp = frm.vin.value;
	var len = tmp.length;
	if(len > MAXLENGTH){
		alert("入力可能な文字数は"+MAXLENGTH+"文字までです");
	}else{
		frm.submit();
	}
}

function test(){
	alert("正常に送信されました");
}

// -->
</script>

</head>

<body>

<form action="JavaScript:test()" method="post">
	<textarea name="vin" rows="5" cols="30">20文字まで入力可能</textarea><br>
	<input type="button" value="GO" onclick="tareachk(this.form);">
</form>

</body>
</html>

[Go To Top]