1

请快速访问此页面并点击右上角的登录：

这是链接：http ://forums.gamesalad.com

我正在尝试预先填写弹出的这两个字段。它们似乎处于某种框架中。我无法使用 getElementByID （或任何 getElement ）访问字段。如何使用 javascript 访问这两个字段？

注意：（不要担心触发 javascript，只需访问字段）。

这是我当前的代码：

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

2 回答 2

1

您的密码和电子邮件输入框具有相同的 ID login-dialog-email。当您尝试分配值时，javascript 会感到困惑。分配不同的ID，你很高兴。

于 2012-05-26T04:39:54.690 回答
1

如果您在调试器（例如 Chrome 调试器）中查看 HTML，您会看到有两个 id="login-dialog-email" 的输入元素实例。

W3C 规范说，在单个 HTML 文档中只能使用 id 属性的一个实例，并且浏览器供应商以一种方式实现此规范，如果相同值的多个 id 属性打开，则行为被认为是未定义的这页纸。

根据我的经验，这实际上只影响具有所述 id 的元素的第二个实例，如果您搜索 login-dialog-email 并检查哪个元素被突出显示，您会看到第二个实例是代表你的表格。

删除第一个实例，或使用唯一 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>
    ...

该字段的第二个实例实际上出现在 fancybox 中，这是您尝试定位的实际 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 回答