浏览器在登录过程中不记得密码

前面的问题提到了一种使用el配置的方法，以使浏览器记住密码。Howewer，el配置在 ExtJS 4.1 中不再存在。

现在，我该怎么办？

我相信

它应该是 contentEl 而不是 el，但我以另一种方式做到这一点。你可以直接用 ExtJS 构建整个东西。唯一的转折是默认情况下将使用 autocomplete=off 属性创建 Ext 字段，因此我使用派生类来覆盖它。

Ext.define('ACField', {
    extend: 'Ext.form.field.Text',
    initComponent: function() {
        Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) {
            if (Ext.isString(oneTpl)) {
                allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"');
            }
        });
        this.callParent(arguments);
    }
});
Ext.onReady(function() {
    new Ext.panel.Panel({
        renderTo: Ext.getBody(),
        width: 300,
        height: 100,
        autoEl: {
            tag: 'form',
            action: 'login.php',
            method: 'post'
        },  
        items: [
            new ACField({
                xtype: 'textfield',
                name: 'username',
                fieldLabel: 'Username'
            }), 
            new ACField({
                xtype: 'textfield',
                name: 'password',
                fieldLabel: 'Password',
                inputType: 'password'
            }), 
        ],
        buttons: [{
            xtype: 'button',
            text: 'Log in',
            type: 'submit',
            preventDefault: false
        }]
    });
});

lagnat 的答案大多是正确的，要让它在 Chrome 和 Firefox 上也能正常工作，需要满足以下条件：

1）覆盖默认的 ExtJS 文本字段行为以进行自动完成（从 lagnat 复制）：

Ext.define('ACField', {
    extend: 'Ext.form.field.Text',
    initComponent: function() {
        Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) {
            if (Ext.isString(oneTpl)) {
                allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"');
            }
        });
        this.callParent(arguments);
    }
});

2）确保文本字段位于<form>标签内：（请参阅lagnat的答案），因为ExtJS 4 <form>标签不再存在于FormPanel中。

    autoEl: {
        tag: 'form',
        action: '/j_spring_security_check',
        method: 'post'
    },

3）确保 HTML 中存在具有相同<input>名称的<form>：

            items:[
                Ext.create('ACField',{
                    fieldLabel: 'Username',
                    name:'j_username',
                    inputId: 'username',
                    allowBlank:false,
                    selectOnFocus:true
                }),
                Ext.create('ACField',{
                    fieldLabel:'Password',
                    name:'j_password',
                    inputId: 'password',
                    xtype:'textfield',
                    allowBlank:false,
                    inputType:'password'
                })
            ],

在 HTML 中具有相同输入名称的常规表单：

<body>
<div id="login-panel">
    <form id="loginForm" action="<c:url value="/j_spring_security_check"/>" method="post">
        <input class="x-hidden" type="text" id="username" name="j_username"/>
        <input class="x-hidden" type="password" id="password" name="j_password"/>
    </form>
</div>
<noscript>Please enable JavaScript</noscript>
</body>

有了所有这些更改，保存用户名/密码可以在IE，Chrome和Firefox中使用。

有一个 autoRender 属性，它允许您将 Extjs 字段应用于页面上已经存在的元素。因此，如果您在 html 中设置基本表单，浏览器应该将表单的字段识别为登录信息，然后 Extjs 会将自身覆盖到该表单上，如果您使用自动渲染并引用正确的字段（以及表单上的按钮到基本 html 表单中的提交类型按钮），它应该可以正常工作。另外，请记住，浏览器可能无法识别用于登录的 ajax 调用，您可能需要使用基本表单提交。我的应用程序中有一个工作示例，但是我很难尝试提取特定于应用程序的代码，因此请在此处提供一个示例。如果您需要该示例，请发表评论，我可能会在周一之前回复您。

按@Lagnat回答不适用于 ExtJS 4.2.1 和 4.2.2。这可能是由于从按钮中删除type配置。我们需要的是按钮的标准提交按钮<input type="submit">。所以我把它加在按钮上，opacity: 0.以下是我的工作代码（在Firefox 27，Chrome 33，Safari 5.1.7，IE 11上测试。应为浏览器启用自动填充/自动保存密码）：

Ext.create('Ext.FormPanel', {
    width: 400,
    height: 500,
    padding: '45 0 0 25',
    autoEl: {
        tag: 'form',
        action: 'login.php',
        method: 'post'
    },
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Username',
        name: 'username',
        listeners: {
            afterrender: function() {
                this.inputEl.set({
                    'autocomplete': 'on'
                });
            }
        }
    }, {
        xtype: 'textfield',
        fieldLabel: 'Password',
        inputType: 'password',
        name: 'username',
        listeners: {
            afterrender: function() {
                this.inputEl.set({
                    'autocomplete': 'on'
                });
            }
        }
    }, {
        xtype: 'button',
        text: 'LOG IN',
        width: 100,
        height: 35,
        preventDefault: false,
        clickEvent: 'click',
        listeners: {
            afterrender: function() {
                this.el.createChild({
                    tag: 'input',
                    type: 'submit',
                    value: 'LOG IN',
                    style: 'width: 100px; height: 35px; position: relative; top: -31px; left: -4px; opacity: 0;'
                });
            }
        }
    }]
});

我建议使用ExtJS内置的Cookie功能。

您可以使用以下方法读取 Cookie：readCookie（'password）;
您可以使用以下方法创建 Cookie：createCookie（'password'， "pass123"， 30）;//保存 30 天

然后，您可以使用基本业务逻辑使用存储的密码自动填充 formField。

这有意义吗？

相关内容

最新更新

热门标签：