< | >

(備忘録) JavaScript
  • (2012-04-01 06:16:41)
htmlは使うが、javascriptまではなかなか手が出ない。しかし、少し知っているだけで、かなり便利。機会あるときはいやがらずに「少しだけ」勉強したい。

文字数カウンター



(2012/04/01)

文字数をリアルタイムにカウントするにはlengthプロパティでOK。

onkeyupというイベントハンドラでリアルタイムに、独自作成の関数ShowLengthを起動し

入力文字列の文字数を数えて、リアルタイムにidで指定された要素に挿入するJavascript。

<script type="text/javascript">

<!--

function ShowLength( str ) {

document.getElementById("inputlength").innerHTML = str.length;

}

// -->

</script>

<textarea name="作品" rows="12" cols="80" onkeyup="ShowLength(value);"></textarea>

(※文字数:<span id="inputlength">現在 0</span> 文字)

※参考URL:

http://www.nishishi.com/javascript/2007/input-counter.html




ログインをjavascriptで制御



(2012/02/22)

formは通常「submit」で送信するが、入力文字のチェックや制御をするために、Javascriptが使えることがわかった。ロリポップのログイン画面から勉強。

・通常のsubmit:

<input type="submit" value="送信" />

・ロリポップ:(floginという関数を、0をパラメーターにつけて起動。0はドメインの種類)

<a href="javascript:flogin(0);">ログイン</a>

-------------------------------

<script type=text/javascript>

<!--

function flogin(pno){

//「1」独自ドメインか「0」ロリポップドメインで入力フォーマットのチェック

if (pno!=1){

if(document.frm.account.value == ""){ alert("入力されていません"); document.frm.account.focus(); return; }

}else{

if(document.frm.account2.value == ""){ alert("入力されていません"); document.frm.account2.focus(); return; }

}

//パスワードフォーマットのチェック

if(document.frm.passwd.value.length > 30 || document.frm.passwd.value.length < 0){ alert("文字数不正です"); document.frm.passwd.focus(); return;

if(document.frm.passwd.value.match(/[^0-9a-za-z_\-=.@!]/)){ alert("パスワードに不正な文字が含まれています"); document.frm.passwd.focus(); return; }

//クッキーの有無によるアクション方法の設定

if(document.cookie != "") document.frm.action="https://user.lolipop.jp/?mode=login&exec=1";

else document.frm.action="https://user.lolipop.jp/?mode=login&exec=2";

//送信

document.frm.submit();

}

//-->

</script>

</head>

<body onload="document.frm.passwd.focus();"> <!-- フォーカスをパスワードフィールドに -->

<form name="frm" method=post>

<input value="xxxxxx" name="account">

<input type="password" name="passwd">

<a href="javascript:flogin(0);">ログイン</a>

</form>

-------------------------------






<< (備忘録) php< | >(備忘録) LEDライト >>
search
layout
admin

[▲page top]