JavaScriptでフォームの文字数をチェックして送信

JavaScriptでフォームの textare の入力文字数をチェックして、 文字数に応じてアラートか submit を返します。 HTML JavaScript また、textarea に入力した文字数もリアルタイム […]

JavaScriptでフォームの textare の入力文字数をチェックして、
文字数に応じてアラートか submit を返します。

HTML

<form action="#" name="form">
<textarea cols="30" rows="10" id="message";></textarea>
<input type="button" value="送信" onClick="set_limit()">
</form>

JavaScript

var txt_limit = 50;//最大文字数
	function set_limit(that){
		var check_element = document.getElementById("message"); 
		var check_limit = check_element.value.length; 
		if(check_limit > txt_limit){
			alert('入力文字数が '+txt_limit+'文字を越えました');
			check_element.focus();
			}
		document.form.submit();
	}

また、textarea に入力した文字数もリアルタイムに反映されるようにしました。
textarea に onkeyup を追加。

<textarea cols="30" rows="10" id="message"  onkeyup="ShowLength(value);"></textarea>

文字数を反映するID要素を追加。

<p id="textlength">0文字</p>

以下のJavaScriptを追加。

function ShowLength( str ) {
      document.getElementById("textlength").innerHTML = str.length + "文字";
   }

フォームの文字数チェック サンプル

Add Comment

本文

コメントはまだありません。

PAGE TOP