ユーザーがEnterキーを押してもJavascriptログインフォームが送信されない

StackOverflow https://stackoverflow.com/questions/239082

質問

サイトの単純なjavascriptログインに取り組んでいますが、これを思いつきました：

<form id="loginwindow">
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
  <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
  <input type="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"username",text1.value,"password") />
</p>

</form>
<script language = "javascript">

function validate(text1,text2,text3,text4)
{
 if (text1==text2 && text3==text4)
 load('album.html');
 else 
 {
  load('failure.html');
 }
}
function load(url)
{
 location.href=url;
}
</script>

...これは、1つのことを除いて機能します。フォームを送信するためにEnterキーを押しても何も実行されません。 <！> quot; onclick <！> quot;を使用したことが原因だと感じています。しかし、代わりに何を使うべきか分かりません。思考？

わかりました。だから、これがセキュリティ面でいかに薄っぺらいかをよく知っています。特に極秘のためのものではないので、大きな問題ではありませんが、もし皆さんがコードで考えを練ることができたら、私はあなたのアイデアを見てみたいです。私がリストしたコードは文字通り私がこの時点で作業しているすべてなので、必要に応じてゼロから始めることができます。

役に立ちましたか？

解決

ここでは一度にいくつかのトピックについて議論しています。明確にしよう。

1。差し迫った懸念：

（ ENTERを押したときに入力ボタンが機能しないのはなぜですか？）

送信ボタンタイプを使用します。

<input type="submit".../>

..の代わりに

<input type="button".../>

あなたの問題は、 onclick 属性を使用したこととはまったく関係ありません。代わりに、ボタン入力タイプを使用しているため、目的の動作が得られません。これは、送信ボタンと同じようには動作しません。

HTMLおよびXHTMLには、特定の要素のデフォルトの動作があります。フォームの入力ボタンは、多くの場合<！> quot; submit <！> quot;タイプです。ほとんどのブラウザでは、<！> quot; submit <！> quot; 同じフォーム要素内のフォーカスされた要素からを押すと、デフォルトで起動するボタン。 <！> quot; button <！> quot;入力タイプはそうではありません。デフォルトの動作を利用したい場合は、入力タイプを<！> quot; submit <！> quot;に変更できます。

例：

<form action="/post.php" method="post">
    <!-- 
    ...
    -->
    <input type="submit" value="go"/>
</form>

2。セキュリティ上の懸念：

@Ady はセキュリティ上の懸念に言及しました。 javascriptでのログインの実行に関連するセキュリティ上の懸念があります。これらはおそらくこの質問のドメインの外にあります。特にあなたは特に心配していないことを示しているため、ログイン方法は実際にはlocation.hrefを新しいhtmlページ（おそらく、実際のセキュリティメカニズムが設定されていないことを示します）。

それをdrする代わりに、SOの関連トピックへのリンクがあります。誰かが直接それらの質問に興味を持っている場合。

3。その他の問題：

コードのクイッククリーンアップは、ベストプラクティスに従っています。それは人々が言及したセキュリティ上の懸念に対処していません。代わりに、単に健康的な習慣を説明するためにそれを含めています。特定の方法で何かを書いた理由について具体的な質問がある場合は、お気軽にお問い合わせください。また、関連トピックのスタックを参照します（質問はすでにここで議論されている可能性があるため）。

主な注意事項は、イベント属性の削除（onclick = <！> quot; <！> quot;、onsubmit = <！> quot; <！> quot ;、またはonkeypress = <！> quot; <！> quot;）HTMLから。これらはjavascriptに属しているため、javascriptイベントをマークアップから除外することをお勧めします。 

<form action="#" method="post" id="loginwindow">
    <h3>Login to view!</h3>
    <label>User ID: <input type="text" id="userid"></label>
    <label>Password: <input type="password" id="pass"></label>
    <input type="submit" value="Check In" />
</form>

<script type="text/javascript">
window.onload = function () {
    var loginForm = document.getElementById('loginwindow');
    if ( loginwindow ) {
        loginwindow.onsubmit = function () {

            var userid = document.getElementById('userid');
            var pass = document.getElementById('pass');

            // Make sure javascript found the nodes:
            if (!userid || !pass ) {
                return false;
            }

            // Actually check values, however you'd like this to be done:
            if (pass.value !== "secret")  {
                location.href = 'failure.html';
            }

            location.href = 'album.html';
            return false;
        };
    }
};
</script>

他のヒント

<！> lt; input type = <！> quot; button <！> quot; <！> gt;の代わりに、<！> lt; input type = <！> quot; submit <！> quot;を使用します。 <！> gt;。フォームのonsubmitハンドラーに検証コードを挿入できます。

<！> lt; form id = <！> quot; loginwindow <！> quot; onsubmit = <！> quot; validate（...）<！> quot; <！> gt;

フォームの送信ではないため、ユーザーがEnterキーを押したときにトリガーされるイベントはありません。上記のフォーム送信オプションの代わりに、入力フォームにイベントリスナーを追加して、ユーザーがEnterキーを押したかどうかを検出します。

<input type="password" name="text1" onkeypress="detectKey(event)">

スクリプトをHTMLドキュメントに直接挿入します。使用する関数でonclick値を変更します。 htmlのスクリプトは、ユーザーがEnterキーを押すか、送信ボタンを押すと送信するようにフォームに指示します。

 <form id="Form-v2" action="#">

<input type="text" name="search_field"  placeholder="Enter a movie" value="" 
id="search_field" title="Enter a movie here" class="blink search-field"  />
<input type="submit" onclick="" value="GO!" class="search-button" />        
 </form>

    <script>
    //submit the form
    $( "#Form-v2" ).submit(function( event ) {
      event.preventDefault();
    });
         </script>

おそらくこれを試すことができます：

<form id="loginwindow" onsubmit='validate(text2.value,"username",text1.value,"password")'>
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
   <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
   <input type="submit" value="Check In"/>
</p>

</form>

他の人が指摘したように、ソリューションには他の問題があります。しかし、これはあなたの質問に答えるはずです。

これは、誰でもすぐにクラックできるので、確かに安全ではありません...

-js-loginsを行うための擬似セキュアな方法のみが似ています：

<form action="http://www.mySite.com/" method="post" onsubmit="this.action+=this.theName.value+this.thePassword.value;">
  Name: <input type="text" name="theName"><br>
  Password: <input type="password" name="thePassword"><br>
  <input type="submit" value="Login now">
</form>

私の考え=大規模なセキュリティホール。誰でもユーザー名とパスワードを表示できます。

質問により関連性が高い：-2つのイベントが発生しています。

  1. ユーザーがボタンをクリックします。
  2. ユーザーがEnterキーを押します。

Enterキーはフォームを送信しますが、ボタンをクリックしません。

フォームのonsubmitメソッドにコードを配置すると、フォームの送信時にコードが実行されます。送信するボタンの入力タイプを変更することにより、ボタンは入力ボタンと同じ方法でフォームを送信します。

その後、両方のイベントに対してコードが実行されます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top