OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

Enterキーの操作

  • すぐに回答を!
  • 質問No.243320
  • 閲覧数736
  • ありがとう数5
  • 気になる数0
  • 回答数6
  • コメント数0

お礼率 24% (59/244)

JavaScriptで、パスワード入力用のテキストボックスとログインする為のボタンを作りました。
パスワードを入力して、ログインボタンを押せば、パスワードを確認し、合っていれば別のページを表示するというものなのですが、ログインボタンではうまくいくのですが、パスワードを入力したあと、Enterキーを押してしまうと、IEのアドレス欄に『?TB_pw=123&C_pw=y』というような感じで入力したパスワードが出てきてしまいます。
Enterキーを押したときの操作はどのように設定すればよいのでしょうか?
通報する
  • 回答数6
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.6
レベル12

ベストアンサー率 75% (398/526)

> パスワードをクッキーか何かを使って、次回から入力せずに済む方法はありますか?
クッキーを使えば、パスワードを入力済みにすることができます。
以下にソースを載せますので、参考にしてみて下さい。
※ローカルでのテストのみなので自信なしです。
※一応、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>

・「パスワードを保存する」にチェックが入った状態でログインすると、その時入力した内容が保存され、次回からパスワードが入力済みになります。
・チェックを外してログインすると、次回はパスワード未入力状態になります。
・ソース内で「※」をつけたところの周辺にある "; " の部分は、セミコロンとスペースです。
 他にも多少見にくい所がありますので、テキストファイルにコピーするなどして、細かくチェックして下さい。(ちょっと間違うと、動かなくなります。)
・webでの見た目のため、全角空白を使っていますので、ソースをコピーして使う時は、半角空白やタブに変換して下さい。(全角空白があると、エラーになります。)
お礼コメント
mirai-r

お礼率 24% (59/244)

ありがとうございました!
大変、勉強になりました。お返事、遅くなりましてすみません。
ポイント、受け取ってくださいね。
投稿日時 - 2002-04-01 08:47:24
-PR-
-PR-

その他の回答 (全5件)

  • 回答No.1
レベル12

ベストアンサー率 41% (245/593)

一部で構わないのでソースコードを記入してみてください。 文章だけではやはりピンときません。 ...続きを読む
一部で構わないのでソースコードを記入してみてください。
文章だけではやはりピンときません。
補足コメント
mirai-r

お礼率 24% (59/244)

フォームのソースが

<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は初めてで、まだ全然未完成の状態で、パスワードの保存の設定なども出来ていない状態です(-_-;)
投稿日時 - 2002-03-29 10:17:02


  • 回答No.2
レベル13

ベストアンサー率 50% (604/1207)

buttonじゃなくてsubmitを使ってみたらどうですか。 <form name="F_pw" action="javascript:myPw()"> <p>パスワード: <input type="password" size="30" name="TB_pw"&g ...続きを読む
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というのは、いわゆる「送信ボタン」です。
お礼コメント
mirai-r

お礼率 24% (59/244)

ありがとうございました。参考にさせて頂きます。
ポイント発行までお待ちください。
投稿日時 - 2002-03-29 13:01:35
  • 回答No.3
レベル12

ベストアンサー率 41% (245/593)

まず、原因は FormはEnterキーで自動Submitしてしまいます。 なので、Method指定、Action指定されていないものはGetで自分にSubmitします。 そのためにUrlの後ろに変数がくっつきます。 回避策はMethodを明示的にPostにしてSubmitイベントにて渡すようにすることで回避できます。 function myPw() { H_Pw = doc ...続きを読む
まず、原因は
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>

これではダメですか?

次画面にパスワード等を渡したく無いのであれば
認証後に明示的に消してあげればいいです。
補足コメント
mirai-r

お礼率 24% (59/244)

ありがとうございました。勉強になりました。
この方法で行ってみます。

セキュリィティーについては、あまり必要とはしていないのですが、
パスワードを明示的に消すと言うのはどういうことなのでしょうか?
投稿日時 - 2002-03-29 13:04:23
  • 回答No.4
レベル12

ベストアンサー率 75% (398/526)

テキストボックス内でのEnterキーで送信されてしまうのは、ブラウザの仕様です。 また、その際に自分自身に送信するため、URLに『?TB_pw=123&C_pw=y』が出てきてしまうというのも、Mizyuさんの言う通りです。 これらは、通常次のようにします。 1.Enterキーへの対処について  Enterキーの動作を無効にすることは難しいので、パスワードチェックを送信時に行います。 ...続きを読む
テキストボックス内でのEnterキーで送信されてしまうのは、ブラウザの仕様です。
また、その際に自分自身に送信するため、URLに『?TB_pw=123&C_pw=y』が出てきてしまうというのも、Mizyuさんの言う通りです。

これらは、通常次のようにします。
1.Enterキーへの対処について
 Enterキーの動作を無効にすることは難しいので、パスワードチェックを送信時に行います。
これは、FORMタグの onSubmit で myPw() を呼び出すことで行えます。(これによって、Enterキーを押しても myPw() が実行されます。)
 また、ログインボタンも type="submit" にすることで、onClick がなくてもチェックできるようになります。

2.『?TB_pw=123&C_pw=y』を表示しない方法について
 確かに、FORMタグの action にHTML名を書いて、method="POST" とすれば表示されなくなるはずですが、サーバによってはPOST送信だと拒否される場合があります。
なので、最初に行っていたように、location.href にURLを指定する方がよいでしょう。
 このとき、FORMの送信動作をキャンセルしないとならないため、onSubmit では常に false を返すようにします。

3.パスワードについて
 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 にするだけです。
補足コメント
mirai-r

お礼率 24% (59/244)

ありがとうございました。大変参考になりました。
ちなみに、下の方に書かれた、次のページのファイル名をパスワードにするという方法で、そのパスワードをクッキーか何かを使って、次回から入力せずに済む方法はありますか?
投稿日時 - 2002-03-29 18:48:19
  • 回答No.5
レベル12

ベストアンサー率 41% (245/593)

>セキュリィティーについては、あまり必要とはしていないのですが、 >パスワードを明示的に消すと言うのはどういうことなのでしょうか? 明示的に消す、というかPOSTを使っても送信させないようにします。 document.F_pw.TB_pw.value = "" return (true) といった感じです。ただ消すだけですけど、次画面には反映されません。 ...続きを読む
>セキュリィティーについては、あまり必要とはしていないのですが、
>パスワードを明示的に消すと言うのはどういうことなのでしょうか?

明示的に消す、というかPOSTを使っても送信させないようにします。

document.F_pw.TB_pw.value = ""
return (true)
といった感じです。ただ消すだけですけど、次画面には反映されません。

あと、Cookieを使いたいのであれば下記URLを参照してみてください。
http://tohoho.wakusei.ne.jp/wwwcook.htm
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ