Question

我有一个页面供用户创建新帐户。名字和姓氏，电子邮件和密码只有4个输入字段，因此我没有使用表单和提交按钮，而是使用Ajax将输入字段值发布到php文件中。

页面上的按钮之一是切换密码输入的可见性。该按钮具有onclick事件，该事件调用一个名为togglepassvis的函数，该函数将输入类型从密码更改为文本。使用通过ajax提交输入字段的方法，所有这些工作都很好。

我注意到当我在localhost上工作时，即使密码输入字段使用的是autocomplete =“ new-password”，Chrome也不要求保存密码，因此我进行了一些搜索，找到了这个Google Developers发布。 https://developers.google.com/web/fundamentals/security/credential-management/save-forms

阅读后，我将表单的开始和结束标记添加到了创建帐户页面，并使其全部使用ajax而不是ajax来工作，而是使用了提交按钮。

但是，如果用于调用“ togglepassvis”的按钮位于打开和关闭表单标签的内部，则该功能不再起作用，并且在控制台中出现未定义的功能togglepassvis。如果我注释掉表单的开始和结束标签，或者将切换按钮移到它们之外，则该功能有效。页面上的其他所有内容都不会破坏表单标签，只需单击此按钮即可切换密码可见性。为什么表单标签会破坏此功能？

  <form action='./' method='post'>
    <div class="form-group">
      <div class="input-group">
        <input id="password" type="password" class="form-control" name='password' placeholder="Pass Phrase (Min 16 characters)" minlength="16" required onkeyup="passlength(this.value);" autocomplete="new-password" >
        <div class="input-group-append">
          <button id="togglepassvis" class="btn btn-primary" type="button" name="togglepassvis" onclick="togglepassvis();">Show</button>
        </div>
      </div>
    </div>
  </form>


<script>
function togglepassvis() {
  var pass = document.getElementById("password");
  if (pass.type === "password") {
    pass.type = "text";
    $('#togglepassvis').html("Hide");
  } else {
    pass.type = "password";
    $('#togglepassvis').html("Show");
  }
}
</script>

我希望按钮和功能可以切换密码可见性/更改输入类型，使其与表单标签无关，但不起作用。取而代之的是，只有在调用此函数的按钮不在开始和结束表单标签内时，togglepassvis函数才起作用。如果按钮在开始和结束表单标签内，则会出现错误- “未捕获的TypeError：togglepassvis不是函数在HTMLButtonElement.onclick“

为什么<form>破坏js函数？

0 个答案: