1

このページにすばやくアクセスして、右上のログインをクリックしてください。

リンクは次のとおりです: http://forums.gamesalad.com

ポップアップするこれら2つのフィールドに事前入力しようとしています。彼らはある種のフレームにいるようです。getElementByID (またはその他の getElement) を使用してフィールドにアクセスできません。JavaScript を使用してこれら 2 つのフィールドにアクセスするにはどうすればよいですか?

注: (フィールドへのアクセスを取得するだけで、javascript の起動について心配する必要はありません)。

これが私の現在のコードです：

document.getElementById('login-dialog-email').value = 'the user name';
4

2 に答える 2

1

login-dialog-emailパスワードとメール入力ボックスに同じIDがあります。値を割り当てようとすると、javascriptが混乱します。別のIDを割り当てれば、準備は完了です。

于 2012-05-26T04:39:54.690 に答える
1

ChromeデバッガーなどのデバッガーでHTMLを見ると、id="login-dialog-email"の入力要素のインスタンスが2つあることがわかります。

W3C仕様では、単一のHTMLドキュメントで使用できるid属性のインスタンスは1つだけであり、ブラウザーベンダーは、同じ値の複数のid属性がオンになっている場合、動作が未定義であると見なされる方法でこの仕様を実装します。ページ。

私の経験では、これは実際には上記のIDを持つ要素の2番目のインスタンスにのみ影響します。login-dialog-emailを検索してどの要素が強調表示されるかを調べると、2番目のインスタンスがあなたのフォーム。

最初のインスタンスを削除するか、一意のIDを使用すると、要素をターゲットにできるようになります。

このログインフィールドの最初のインスタンスは、ページに非表示になっているテンプレートの一部であるように見えます。

<div id="login-form-template" style="display: none">
    <form accept-charset="UTF-8" action="https://auth.gamesalad.com/auth/signIn" class="dialog dialog-form" id="common-login-form" method="post">
   ...

    <li class="email">
        <label for="login-dialog-email">
        Email:
          <input id="login-dialog-email" name="emailAddress" type="text" value=""></input>
        </label>
    </li>
    <li class="password">
        <label for="login-dialog-password">
        Password:
          <input id="login-dialog-password" name="password" type="password" value="">
        </label>
    ...

このフィールドの2番目のインスタンスは、実際にはファンシーボックス内に表示されます。これは、ターゲットにしようとしている実際のHTMLが配置されている場所です。

<div id="fancybox-content" style="border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; width: 300px; height: 233px; "><div style="width:300px;height:auto;overflow: auto;position:relative;">
   <form accept-charset="UTF-8" action="https://auth.gamesalad.com/auth/signIn" class="dialog dialog-form" id="common-login-form" method="post">
   ...
   <li class="email">
       <label for="login-dialog-email">
         Email:
         <input id="login-dialog-email" name="emailAddress" type="text" value="">
       </label>
   </li>
   <li class="password">
     <label for="login-dialog-password">
       Password:
       <input id="login-dialog-password" name="password" type="password" value="">
     </label>
   <span>
...

したがって、サイト所有者がページからこれらのフィールドをターゲットにしようとしても、同じ問題が発生します。

この問題の解決策は、任意のテンプレート内でclassName属性を使用することです。これにより、すべてのフィールドをDOMメソッドを介してターゲットにできるようになります。

ただし、これは、要素をまだターゲットにできないことを意味するものではありません。

JavaScript：

document.getElementsByClassName("email")[2].
    getElementsByTagName("input")[0].value = "test@example.com";

jQuery：

このサイトはjQueryを使用しているため、次の方法も使用できる可能性があります。

$('input[name="emailAddress"]').val( "test@example.com" );
于 2012-05-26T04:40:42.517 に答える