アプリ版：「スタンプのみでお礼する」機能のリリースについて

Enterキーの操作

解決済

  • 質問者：mirai-r
  • 質問日時：
  • 回答数：6件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.1

  • 回答者： Mizyu
  • 回答日時：

一部で構わないのでソースコードを記入してみてください。


文章だけではやはりピンときません。

この回答への補足

フォームのソースが

<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
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： UKY
  • 回答日時：

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というのは、いわゆる「送信ボタン」です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。参考にさせて頂きます。
ポイント発行までお待ちください。

通報する
お礼日時：2002/03/29 13:01

No.3

  • 回答者： Mizyu
  • 回答日時：

まず、原因は


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>

これではダメですか？

次画面にパスワード等を渡したく無いのであれば
認証後に明示的に消してあげればいいです。

この回答への補足

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

セキュリィティーについては、あまり必要とはしていないのですが、
パスワードを明示的に消すと言うのはどういうことなのでしょうか？

補足日時：2002/03/29 13:04
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： leaz024
  • 回答日時：

テキストボックス内での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 にするだけです。

この回答への補足

ありがとうございました。大変参考になりました。
ちなみに、下の方に書かれた、次のページのファイル名をパスワードにするという方法で、そのパスワードをクッキーか何かを使って、次回から入力せずに済む方法はありますか？

補足日時：2002/03/29 18:48
通報する
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： Mizyu
  • 回答日時：

>セキュリィティーについては、あまり必要とはしていないのですが、


>パスワードを明示的に消すと言うのはどういうことなのでしょうか？

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

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

あと、Cookieを使いたいのであれば下記URLを参照してみてください。
http://tohoho.wakusei.ne.jp/wwwcook.htm
    • good
    • 0
    • 件
通報する

No.6ベストアンサー

  • 回答者： leaz024
  • 回答日時：

> パスワードをクッキーか何かを使って、次回から入力せずに済む方法はありますか？


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

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

ありがとうございました！
大変、勉強になりました。お返事、遅くなりましてすみません。
ポイント、受け取ってくださいね。

通報する
お礼日時：2002/04/01 08:47

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報