- ベストアンサー
Enterキーの操作
JavaScriptで、パスワード入力用のテキストボックスとログインする為のボタンを作りました。 パスワードを入力して、ログインボタンを押せば、パスワードを確認し、合っていれば別のページを表示するというものなのですが、ログインボタンではうまくいくのですが、パスワードを入力したあと、Enterキーを押してしまうと、IEのアドレス欄に『?TB_pw=123&C_pw=y』というような感じで入力したパスワードが出てきてしまいます。 Enterキーを押したときの操作はどのように設定すればよいのでしょうか？
- mirai-r
- お礼率24% (59/244)
- JavaScript
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
> パスワードをクッキーか何かを使って、次回から入力せずに済む方法はありますか？ クッキーを使えば、パスワードを入力済みにすることができます。 以下にソースを載せますので、参考にしてみて下さい。 ※ローカルでのテストのみなので自信なしです。 ※一応、IE5.5、NN4.7、NN6.2で正常に動くことを確認しています。 <HTML> <HEAD> <SCRIPT language="JavaScript"><!-- var EffectiveDays = 30; // クッキーの有効日数 var PassKey = 'pswd' // クッキーのキー（パスワード用） function getPw() { document.F_pw.TB_pw.value = getCookie(PassKey); } function myPw(f) { setCookie(PassKey, f.C_pw.checked ? f.TB_pw.value : ""); location.href = f.TB_pw.value + ".htm"; return false; } // ココから下は汎用関数（いじらないで！） function getCookie(key) { var pairs = document.cookie.split('; '); ※ for (var i in pairs) { var pair = pairs[i].split('='); if (pair[0] == key) return pair[1] ? pair[1] : ""; } return ""; } function setCookie(key,val) { var dt = new Date(); dt.setTime(dt.getTime() + (EffectiveDays * 24*60*60*1000)); path = location.pathname.replace(/\/[^\/]+$/, "/"); document.cookie = ※ key + "=" + escape(val) + "; " + "expires=" + formatDate(dt) + "; " + "path=" + path + "; "; } function formatDate(d) { var e = d.toString().split(' '); return e[0]+", "+e[2]+"-"+e[1]+"-"+e[e.length-1]+" "+e[3]; } //--></SCRIPT> </HEAD> <BODY onLoad="getPw()"> <FORM name="F_pw" onSubmit="return myPw(this)"> <P>パスワード： <INPUT type="password" size="30" name="TB_pw"> <INPUT type="submit" value="ログイン"><BR><BR> <INPUT type="checkbox" name="C_pw" value="y" checked>このパスワードを保存する。 </P> </FORM> </BODY> </HTML> ・「パスワードを保存する」にチェックが入った状態でログインすると、その時入力した内容が保存され、次回からパスワードが入力済みになります。 ・チェックを外してログインすると、次回はパスワード未入力状態になります。 ・ソース内で「※」をつけたところの周辺にある "; " の部分は、セミコロンとスペースです。 他にも多少見にくい所がありますので、テキストファイルにコピーするなどして、細かくチェックして下さい。（ちょっと間違うと、動かなくなります。） ・ｗｅｂでの見た目のため、全角空白を使っていますので、ソースをコピーして使う時は、半角空白やタブに変換して下さい。（全角空白があると、エラーになります。）
その他の回答 (5)
- Mizyu
- ベストアンサー率41% (245/593)
>セキュリィティーについては、あまり必要とはしていないのですが、 >パスワードを明示的に消すと言うのはどういうことなのでしょうか？ 明示的に消す、というかPOSTを使っても送信させないようにします。 document.F_pw.TB_pw.value = "" return (true) といった感じです。ただ消すだけですけど、次画面には反映されません。 あと、Cookieを使いたいのであれば下記URLを参照してみてください。 http://tohoho.wakusei.ne.jp/wwwcook.htm
- leaz024
- ベストアンサー率75% (398/526)
テキストボックス内でのEnterキーで送信されてしまうのは、ブラウザの仕様です。 また、その際に自分自身に送信するため、URLに『?TB_pw=123&C_pw=y』が出てきてしまうというのも、Mizyuさんの言う通りです。 これらは、通常次のようにします。 １．Enterキーへの対処について Enterキーの動作を無効にすることは難しいので、パスワードチェックを送信時に行います。 これは、FORMタグの onSubmit で myPw() を呼び出すことで行えます。（これによって、Enterキーを押しても myPw() が実行されます。） また、ログインボタンも type="submit" にすることで、onClick がなくてもチェックできるようになります。 ２．『?TB_pw=123&C_pw=y』を表示しない方法について 確かに、FORMタグの action にHTML名を書いて、method="POST" とすれば表示されなくなるはずですが、サーバによってはPOST送信だと拒否される場合があります。 なので、最初に行っていたように、location.href にURLを指定する方がよいでしょう。 このとき、FORMの送信動作をキャンセルしないとならないため、onSubmit では常に false を返すようにします。 ３．パスワードについて JavaScriptにパスワードが書いてあるので、見ようと思えば誰にでもパスワードが見られてしまいます。（外部ファイルに置いても、暗号化しても、所詮は見られてしまいます。） なので、JavaScriptのみでパスワードを掛けたい場合は、次のページ（top.htm）のファイル名をパスワードにすると良いでしょう。 これらをまとめると、次ようになります。 <FORM onSubmit="return myPw(this)"> <P>パスワード： <INPUT type="password" size="30" name="TB_pw"> <INPUT type="submit" value="ログイン"><BR><BR> <INPUT type="checkbox" name="C_pw" value="y" checked>このパスワードを保存する。 </P> </FORM> function myPw(f) { location.href = f.TB_pw.value + ".htm"; return false; } パスワードが違う時は「ページが見つかりません」というエラーになります。（alertはできませんが、簡単にパスワードがばれてしまうよりは良いでしょう。） パスワードを変えたいときは、top.htm のファイル名を 新パスワード.htm にするだけです。
補足
ありがとうございました。大変参考になりました。 ちなみに、下の方に書かれた、次のページのファイル名をパスワードにするという方法で、そのパスワードをクッキーか何かを使って、次回から入力せずに済む方法はありますか？
- Mizyu
- ベストアンサー率41% (245/593)
まず、原因は FormはEnterキーで自動Submitしてしまいます。 なので、Method指定、Action指定されていないものはGetで自分にSubmitします。 そのためにUrlの後ろに変数がくっつきます。 回避策はMethodを明示的にPostにしてSubmitイベントにて渡すようにすることで回避できます。 function myPw() { H_Pw = document.F_pw.TB_pw.value; if ( H_Pw == "123" ) return(true) else alert( "パスワードが違います!" ); return(false); } <form name="F_pw" method = post action = top.htm onSubmit="return myPw()"> <p>パスワード： <input type="password" size="30" name="TB_pw"> <input type="submit" value="ログイン" ><BR><BR> <input type="checkbox" name="C_pw" value="y" checked>このパスワードを保存する。 </p> </form> これではダメですか？ 次画面にパスワード等を渡したく無いのであれば 認証後に明示的に消してあげればいいです。
補足
ありがとうございました。勉強になりました。 この方法で行ってみます。 セキュリィティーについては、あまり必要とはしていないのですが、 パスワードを明示的に消すと言うのはどういうことなのでしょうか？
- UKY
- ベストアンサー率50% (604/1207)
buttonじゃなくてsubmitを使ってみたらどうですか。 <form name="F_pw" action="javascript:myPw()"> <p>パスワード： <input type="password" size="30" name="TB_pw"> <input type="submit" value="ログイン"><BR><BR> <input type="checkbox" name="C_pw" value="y" checked>このパスワードを保存する。 </p> </form> myPw()函数は手を加えてません。submitというのは、いわゆる「送信ボタン」です。
お礼
ありがとうございました。参考にさせて頂きます。 ポイント発行までお待ちください。
- Mizyu
- ベストアンサー率41% (245/593)
一部で構わないのでソースコードを記入してみてください。 文章だけではやはりピンときません。
補足
フォームのソースが <form name="F_pw"> <p>パスワード： <input type="password" size="30" name="TB_pw"> <input type="button" value="ログイン" onClick="myPw()"><BR><BR> <input type="checkbox" name="C_pw" value="y" checked>このパスワードを保存する。 </p> </form> といった感じで、JavaScriptは function myPw(){ H_Pw = document.F_pw.TB_pw.value; if ( H_Pw == "123" )location.href = "top.htm"; else alert( "パスワードが違います!" ); } を、拡張子をjsにして、別のファイルにしています。 JavaScriptは初めてで、まだ全然未完成の状態で、パスワードの保存の設定なども出来ていない状態です(-_-;)
お礼
ありがとうございました！ 大変、勉強になりました。お返事、遅くなりましてすみません。 ポイント、受け取ってくださいね。