如何在 Gigya 中 show/hide 密码字段

Question

我在 Gigya 外部使用 html、js 和 css 在右侧创建了带有 'eye' 的密码字段。单击眼睛，密码字段中的文本将 hide/show。 enter image description here

我正尝试在 Gigya 做同样的事情。然而，问题来了—— 1. 如果我编辑html 文件，我将无法再次使用UI Builder。 2. Gigya 的 RaaS 中的 Javascript 参数不允许我添加 js 除了添加定义函数的代码。

我的问题是 - 我如何在 Gigya 中做到这一点？

如果我想使用 enter image description here 所示的复选框而不是 'eye'，Gigya 如何处理？

Answer 1

您可以将任何自定义 css class 添加到 UI 构建器的 CSS 样式选项卡，它位于左侧列表的底部附近UI Builder 中的屏幕（靠近 JavaScript 参数），然后您可以使用 CSS 类字段将 class 添加到密码字段字段属性 window（选择字段时 UI 构建器的右侧）。

您可以使用 JavaScript 编辑器在屏幕的 onAfterScreenLoad 事件中添加自定义 JS，它会在屏幕绘制后立即运行。 - 或者，您可以在函数中本地托管页面上的所有自定义 JS，然后只需在 showScreenSet 调用中添加 onAfterScreenLoad 参数，即

gigya.accounts.showScreenSet({
   "screenSet": "Default-RegistrationLogin",
   "onAfterScreenLoad": myFunctionName
});

任何 HTML 更改都会稍微困难一些，但您可以使用与 JQuery 或其他东西相同的事件来完成。我可以调查一下，看看是否有任何其他方式，并在几天内更新。

11 月 12 日，更新了一个工作示例：

这是一个功能示例，我只为登录屏幕做了它，还需要额外的工作才能完全支持注册屏幕：

gigya.accounts.showScreenSet({
    "screenSet": "Default-RegistrationLogin",
    "onAfterScreenLoad": function() {
        var fieldToChange = document.getElementsByName('password')[0];
        var newPwDiv = document.createElement('div');
        newPwDiv.id = 'passSwitch';
        newPwDiv.innerHTML = "-O-"; // change this out with your image
        newPwDiv.setAttribute('style', 'float: right !important; color: red !important; z-index: 9999999999999999999 !important; display: block !important; position: absolute; margin: -41 0 0 334; cursor: pointer !important; text-align: center;');

        // add eventListener
        newPwDiv.addEventListener("click", function() {
            var currentValue = fieldToChange.type;
            if (currentValue === 'password') {
                fieldToChange.type = "text";
            } else {
                fieldToChange.type = "password"
            }
        });
        // attach to password field
        fieldToChange.parentElement.appendChild(newPwDiv);
    }
});

11 月 14 日，更新了更多信息

要仅通过 UI 生成器执行此操作，您可以将任何相关 CSS 添加到 UI 生成器的 CSS 样式选项卡：

然后您可以将 JavaScript 添加到 JavaScript 参数选项卡：

Link to demo

如果您仍然遇到问题，我建议您通过 Gigya 控制台打开支持票，我们可以调查您的具体用例。

如何在 Gigya 中 show/hide 密码字段

How to show/hide password field in Gigya

html

javascript

css

passwords

gigya