disabledプロパティ
テキストエリアの文字数オーバーで送信ボタンを無効化にします。
＊有効文字数の範囲でないと,送信ボタンが押せないので
投稿はできません。事実上の文字数制限になっています。
改行,全角 半角スペースは文字数にカウントされません。
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>入力文字数は ５文字以上 １５文字まで。<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!」が無料で使えます！！
