テキストエリアの文字数に制限をかける簡単な方法（アイデア）　byシステム開発センター

GUIライブラリ実験室

GUIライブラリ実験室＞2008-07-31

テキストエリアの文字数に制限をかける簡単な方法（アイデア）

アンケートや投稿などユーザー記入してもらうフォームを利用する際、名前やアドレスのように1行で収まるものは <input type="text"> のテキストボックスを使い、

文字数の多いコメントには複数行の入力ができるテキストエリア<textarea> を使います。

しかしこのテキストエリア、文字数を制限する<maxlength="数字">が機能せず、スクロールバーと共に無限にテキスト入力ができてしまい非常に困ります。

そんな時、便利なのがこれです↓↓

厳密に言ってしまうと「文字数の制御」ではなく「文字数のお知らせ」になりますが、

入力している時点で「現在の文字数」と「入力可能な残り文字数」をユーザーに伝えるといった点では、なかなか効果があるようです。

この方法はユーザへの配慮にしかすぎないので、確認ページでの補正やサーバサイドでの制御を必ず行う必要があります。

以下のコードを参照してください。最大文字数は50文字に設定しています

<form name="form">

<textarea name="textarea" cols="40" rows="5" wrap="physical" onKeyup="

o=document.getElementById('slen');

n=this.value.replace(/\s|　/gm,'').length;

o.value=n;

o.innerHTML=n;

o.style.color=(n>50)?'red':'tan';

document.getElementById('mes').innerHTML=(n>50)?'文字　文字制限を越えました':'文字';

document.getElementById('mes2').innerHTML=(n>50)?'':'　あと'+(50-n)+'文字です。';

"></textarea>

<br />

<span id="slen">

</span>

<span id="mes" style="font-size:12px">文字</span>

<span id="mes2" style="font-size:12px"></span>

</form>

サポート対応エリア（オンサイト）

東京都、神奈川県、横浜市、千葉県、埼玉県、静岡県、山梨県

サポート対応エリア（オンライン）

全国対応

業務管理システム開発とWEBシステム開発｜システム開発センターはSQLserver開発の専門プロジェクト

GUIライブラリ実験室