我如何在WordPress网站上自定义登录表单，以允许用户查看和隐藏其密码？

Question

我的WordPress网站（版本5.2.5）上的登录表单是使用“主题我的登录”插件（版本6.4.9）自定义的。

[当我在Microsoft Edge版本81.0.416.64中访问登录页面http://staging.alphaprofit.com/log-in-or-register/时，看到“眼睛图标”。

“眼睛图标”允许用户在查看和隐藏密码之间切换。

但是，当我使用Chrome或Firefox访问同一登录页面时，“眼睛图标”不会显示。

要在Chrome和Firefox中启用“眼睛图标”，我做了以下操作：

我从w3schools.org https://www.w3schools.com/howto/howto_js_toggle_password.asp中获取了代码行，并将它们添加到主题我的登录文件login-form.php，位于http://staging.alphaprofit.com/wp-content/plugins/theme-my-login/templates/login-form.php

<div class="tml-rememberme-submit-wrap">
<p class="tml-rememberme-wrap">
<input name="showpwdchkbox" type="checkbox" id="showpwdchkbox<?php $template->the_instance(); ?>" onclick="myFununction()" />
<label for="showpwdchkbox<?php $template->the_instance(); ?>"><?php esc_attr_e( 'Show Password', 'theme-my-login' ); ?></label>
</p>
</div>

<script>
function myFununction() {
  var x = document.getElementById("user_pass");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>

使用上述代码后，Chrome和Firefox中都会同时显示“显示密码”复选框。

但是，复选框切换不起作用。它不会隐藏或显示密码。切换开关基本已死。

我应该如何解决此问题，以便用户可以在所有主流浏览器（例如Chrome，Safari，Edge和Firefox）中查看和隐藏密码？

更新

感谢您的帮助。我检查了插件代码。它的输入密码字段位于我之前发送给您的代码上方：

<p class="tml-user-pass-wrap">
<label for="user_pass<?php $template->the_instance(); ?>"><?php _e( 'Password', 'theme-my-login' ); ?></label>
<input type="password" name="pwd" id="user_pass<?php $template->the_instance(); ?>" class="input" value="" size="20" autocomplete="off" />
<a href="../lostpassword">Forgot Password?</a>
</p>

[Java代码通过子主题的functions.php文件中的以下几行执行：

function load_js_tml_loginformpage() {
if (is_page(6527)) {
wp_enqueue_script('my-jvsc', 'http://staging.alphaprofit.com/wp-content/plugins/theme-my-login/templates/ummy-js.js', array('jquery'), '', false);
}
}
add_action('wp_enqueue_scripts', 'load_js_tml_loginformpage');

现在，JavaScript文件“ ummy-js.js”具有以下代码行。该代码仅适用于第一个实例“ user_pass1”：

function myFununction() {var x = document.getElementById("user_pass1");
if (x.type === "password") {x.type = "text";} else {x.type = "password";
}
}

参考http://staging.alphaprofit.com/log-in-or-register/，以上的Javascript代码有2个问题：

1]在Firefox中，当用户开始在登录页面中输入密码的前几个字符时，该页面似乎会刷新。这需要几秒钟的时间，用户才能继续输入完整密码。有没有办法停止这种自动刷新和延迟？此问题似乎未在Chrome中显示。

2）插件中密码字段的ID包含实例值，例如“ user_pass1”或“ user_pass2”，依此类推。目前，我添加的Javascript代码仅检查ID =“ user_pass1”。什么是Javascript语法来检查多个实例，即检查“ user_pass＃”（其中＃= 1、2,3等）而不是单独检查“ user_pass1”。

function myFununction() {
var x = document.getElementById("user_pass1");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}

Answer 1

您需要为密码添加一个输入字段并为其提供正确的ID。

function myFununction() {
  var x = document.getElementById("user_pass");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

<div class="tml-rememberme-submit-wrap">
  <p class="tml-rememberme-wrap">
    <input name="showpwdchkbox" type="checkbox" id="showpwdchkbox" onclick="myFununction()" />
    <label for="showpwdchkbox">Show</label>
  </p>
</div>
<div>
<input type="password" id="user_pass">
</div>