動的にKeyUp,Changeのイベントを拾って画面に結果を表示する動きになっています。
- <script language="JavaScript">
- <!--
- var max=15; //制限文字数
- function Limit(event){
- frmtxtarea= document.getElementById("twittertextarea");
- frmDispMsg= document.getElementById("twitterdispmsg");
- txtOrgText= frmtxtarea.value; //テキストエリアの文字
- txtLength= txtOrgText.replace(/\n|\r\n/g,"");//改行を除く
- txtCntLength= txtLength.length; //改行を含めない文字数
- intZansuu = (max - txtLength.length);
- Etype=event.type; //イベントのタイプを取得
- if(Etype== "keyup"){//イベントのタイプが"Keyup"なら
- if(intZansuu<0){
- frmDispMsg.innerHTML=
- "<span style='font-weight: bold;color:red ;'>"+ intZansuu +"</span>文字";
- }else{
- frmDispMsg.innerHTML= //文字数のカウントを表示
- "<span style='font-weight: bold;color:blue ;'>"+ intZansuu +"</span>文字";
- }
- }
- if(Etype=="change") {
- //イベントのタイプが"onChange"で制限文字数を超えたらalert
- if(intZansuu <0 ){
- alert((txtCntLength-max)+"文字オーバーです.\n15文字以内にしてください");
- frmtxtarea.value=txtOrgText.substring(0,max);
- frmDispMsg.innerHTML=
- "<span style='font-weight: bold;color:blue ;'>"+max+"</span>文字";
- }
- }
- }
- // -->
- </script>
- <form><textarea cols="30" rows="2" id="twittertextarea" onchange="Limit(event)" onkeyup="Limit(event)"></textarea>
- <span id="twitterdispmsg">文字数カウント</span>
- </form>