2010年03月07日

テキストエリアの入力可能 残り文字数表示 制限オーバーで投稿不可。

スポンサード リンク

disabledプロパティ
テキストエリアの文字数オーバーで送信ボタンを無効化にします。

入力文字数は 5文字以上 15文字まで。

カウント / *****

 *有効文字数の範囲でないと,送信ボタンが押せないので
投稿はできません。事実上の文字数制限になっています。
改行,全角 半角スペースは文字数にカウントされません。

ウェブ検索するだけで楽天スーパーポイントがもらえる
FC2レンタルサーバーLiteでホームページを作る!

サンプルソース

<html>
<head>
<title>テキストエリアの入力文字数制限。</title>
<script type="text/javascript">
<!--
  limitM=15; //最大文字数
  limitS=5; //最小文字数
function mojilen(str){
  val=str.replace(/\s| /gm,'').length;//空白文字を除いた文字数

  if (val<limitS || val>limitM){ //文字数の条件
 document.getElementById('sosin').disabled = true;} //ボタン無効化
  else{document.getElementById('sosin').disabled = false;} //ボタン有効化

document.getElementById('msg1').innerHTML= //文字数表示
"<span style='font-weight: bold;color:blue ;'>"+val+"</span>文字";

if(val>limitM){max();return} //制限文字数を超えた時 max()を実行
 if(val==limitM){ //制限文字数と文字数が同じなら"制限文字数です"を表示
  document.getElementById('msg2').innerHTML=
"<span style='font-weight: bold;color:red;'>制限文字数です。</span>";}
else{
document.getElementById('msg2').innerHTML=//残り文字数表示
"残り <span style='font-weight: bold;color:blue ;'>"
+(limitM-val)+"</span>文字です。";}
   }

function max(){ //入力文字数が制限文字数を超えた時
  document.getElementById('msg2').innerHTML= //超えた文字数表示
"制限文字数を <span style='font-weight: bold;color:red;'>"
+Math.abs(limitM-val)+"</span>文字オーバーです。";
   }
//-->
</script>
</head>
<body>
 <form>入力文字数は 5文字以上 15文字まで。<br>
  <textarea cols="50" rows="5" id="tarea2" onKeyup="mojilen(value);">
</textarea><br>
 <p style="color :maroon;">
  <span id="msg1">カウント</span> / <span id="msg2">***</span></p>
   <input type="submit" id="sosin" value=" 送信 " disabled="disabled">
</form>
   </body>
   </html>

val=str.replace(/\s| /gm,'').length;
空白文字を除いた文字列の長さを取得します。
\s は空白文字を示す簡略化記法です。
空白文字とは 改行文字、タブ文字や半角スペースのことです。
正規表現による文字列置換 String.replace();でこれらを取り除いています。

if (val<limitS || val>limitM)
論理演算子です。  主にif条件式で使用します。
論理積(かつ) '&&' 、論理和(あるいは)"||" 、否定(指定した値でない)"!"
上の式で limitS= 5,limitM= 15 とするなら
(val が 5 より小さいか、あるいは val が 15 より大きければ)という条件になります。

Obj.disabled = true; Obj.disabled = false;
disabled 属性に true を指定すると無効化になり送信ボタンは押せなくなります。
false で無効化を解除します。

タグ名 disabled="disabled"
指定した要素を無効化します。 ここでは送信ボタンが初期値で無効化です。
↓↓テキストエリアに指定しました。

<textarea cols="20" rows="2" disabled="disabled">
選択や書き換えが
 できなくなります。
</textarea>


Math.abs(n)メソッド
数値 n の絶対値を得ます。
  Math.abs(-5)   // 5 :

textarea要素 複数行入力
テキストエリアの行数 正規表現で改行コードの数の取得
正規表現による文字列置換 String.replace();
チェックボックスのチェックできる数を制限し,入力不可にします。
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 21:05 | 大阪 ☔ | Textarea テキストエリア | このブログの読者になる | 更新情報をチェックする

2010年03月04日

テキストエリアの文字数制限

スポンサード リンク

textarea 制限文字数を超えたら警告を表示し
オーバーした文字列を削除します。


9文字

無料どころか、稼げるブログ。Seesaa
無料レンタルカウンター「デジデジ」

サンプルソース

<html>
<head>
<title>テキストエリアの文字数制限</title>
<script language="JavaScript">
 <!--
var max=15; //制限文字数
function Limit(event){
 Tarea= document.getElementById("Tobj1");
  Mcnt= document.getElementById("msg1");
  mojiVal= Tarea.value; //テキストエリアの文字数
   val= mojiVal.replace(/\n|\r\n/g,"");//改行を除く
   val= val.length; //改行を含めない文字数
    Etype=event.type; //イベントのタイプを取得

if(Etype== "keyup"){//イベントのタイプが"Keyup"なら
  Mcnt.innerHTML= //文字数のカウントを表示
"<span style='font-weight: bold;color:blue ;'>"+val+"</span>文字";
   }

else{ //イベントのタイプが"onChange"で制限文字数を超えたらalert
if(val>max){alert((val-max)+"文字オーバーです.\n15文字以内にしてください");
 Tarea.value=mojiVal.substring(0,max);
  Mcnt.innerHTML=
"<span style='font-weight: bold;color:blue ;'>"+max+"</span>文字";}
    }
  }
// -->
</script>
</head>
<body>
   <form>
<textarea cols="50" rows="5" id="Tobj1"
onchange="Limit(event)" onkeyup="Limit(event)">
</textarea><br>
<span id="msg1">文字数カウント</span><br>
</form>
</body>
</html>

 onchange onkeyup イベントハンドラから 関数 Limit を呼び出し
event.type で発生したイベントのタイプ(型)を取得し
処理を分岐させています。

mojiVal.replace(/\n|\r\n/g,"");
 正規表現で改行文字を空「""」に置き換えて replaceメソッド
削除し改行をカウントしないようにしています。テキストエリア の改行,行数

Tarea.value= mojiVal.substring(0,max);
 文字列.substring(開始位置,終了位置) 指定した範囲内の文字を抜き出します
テキストエリアの文字数が制限文字数を越えた場合最初から制限文字数までの
文字列を取り出してテキストエリアに出力します。

テキストエリア
正規表現による文字列置換 String.replace();
テキストエリア textarea の行数 取得
指定した範囲内の文字を抜き出します。substring()メソッド
eventオブジェクト event.typeプロパティ
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 17:13 | 大阪 ☁ | Textarea テキストエリア | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。