如何禁用/启用 Keycloak 中的登录按钮？

Question

我正在设计一个 Keycloak 登录页面，并尝试使用 JavaScript 实现逻辑，以便只有在用户输入用户名和密码时才能激活登录按钮。我在另一个文件/项目中测试了逻辑，它有效，但在 Keycloak 中它不起作用。下面是我尝试使用的代码。

在 .ftl 文件中：

<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
   <input tabindex="4" class="form-button" name="login" id="kc-login" type="submit" value="${msg("Login")}" disabled />

以及 JavaScript 的逻辑：

function toggleButton() {
   const username = document.querySelector('#username').value;
   const password = document.querySelector('#password').value;

   if (username && password) {
       document.querySelector('#kc-login').disabled = false;
           return
   }
        document.querySelector('#kc-login').disabled = true;
}

有人可以帮助我吗？我进行了搜索，但没有找到解决此问题的方法。除此之外我还需要做任何事情吗？这是我第一次使用 Keycloak，所以我真的不知道它会是什么

Answer 1

您可能需要添加事件处理程序以在

toggleButton()

和

username

输入

password

上调用

onkeyup=toggleButton()

函数。