如何确定浏览器是否自动填写了用户名/密码表单输入字段,而不是用户?

时间:2019-08-18 15:31:36

标签: html browser autocomplete passwords username

问题:

当浏览器自动预填充表单的用户名或密码输入字段时,是否可以临时阻止输入字段的 onchange事件触发,但随后允许此事件触发和更新当用户实际上在这些字段中输入值时,一个名为 changed 的自定义属性会变为“ true”吗?如果不是,那么是否可以通过某种方式检测到浏览器对这些字段的预填充?或者在浏览器处于预填充期间的状态?

如果用户以前未曾访问过网页/表单,那么浏览器将不会尝试自动填充这些字段,因此,任何解决方案(无论是什么解决方案)都应仅在用户填写这些字段时才正确触发字段,并且不会阻止 changed 属性在第一次更改时进行更新。

背景:

我有一个带有用户名输入字段和密码输入字段的表单,如果以前在这些浏览器中输入了这些值,则Chrome,IE,Edge和FireFox浏览器都正确地预先填充了用户名和密码字段并在上一个会话中保存了表单-这正是我想要的

当用户按下表单的“取消”按钮时,当他们将任何值放入表单的任何字段(包括用户名和密码字段)时,我只想用一个确认对话框提示用户。

如果未在任何表单字段中输入任何内容,则按“取消”按钮将不会显示确认对话框。

“取消”按钮的 onclick事件调用一个函数,该函数扫描表单字段以查找自定义输入字段 changed 属性已设置为“ true”,然后显示确认信息对话框(如果有)。如果未找到,则不会显示确认对话框,并且允许用户退出表单。

但是,当浏览器自动预填充用户名和密码字段时,该字段的 onchange事件会触发并将该字段的自定义更改属性更新为“ true”,因此当用户输入按“取消”按钮。

以下代码不完整,但显示了显示用户名和密码字段所需的基本知识:

<tr>
  <td style="font-size: medium;">
    <label style="color: white;" for="signup_username">User Name:</label>
  </td>
  <td>
    <input type="text" id="signup_username" name="signup_username"
           class="signups" style="width: 400px;
                  text-transform: lowercase;"
           maxlength="100" autocomplete="off"
           changed="false"
           onchange="this.setAttribute( 'changed', 'true' );"
           value="signup_username">
  </td>
</tr>
<tr>
  <td style="font-size: medium;">
    <label style="color: white;" for="signup_password">Password:</label>
  </td>
  <td>
    <input type="password" id="signup_password" name="signup_password"
           class="signups" autocomplete="off" style="width: 400px;"
           maxlength="80" data-toggle="tooltip"
           changed="false"
           onchange="this.setAttribute( 'changed', 'true' );"
           onclick="this.setSelectionRange( 0, 9999 );"
           onfocus="this.onchange();"
           value="signup_password">
  </td>
</tr>

按下表单的“取消”按钮时调用的代码:

<script>
  function confirmCancel() {
    const SUBMIT_FORM = true;

    //
    // Scan the visible form fields that are identified with the signups
    // class and which have their custom changed attribute set to 'true'.
    //

    var  inputs = $( 'input.signups[changed="true"]' );

    //
    // Prompt the user if there are any changed fields.
    // If none, then just submit the form.
    //

    return ( inputs.length ? confirm( 'Cancel join?' ) : SUBMIT_FORM );
  }
</script>

谢谢。

0 个答案:

没有答案