Question

如果用户在输入密码时打开大写锁定，我想添加一条消息。这是我到目前为止尝试过的。

 {
     xtype:'textfield',
     itemId: 'field_password_login',
     fieldLabel: 'Password',
     inputType: 'password',
     allowBlank: false,
     listeners:
     {
         keypress: function(tf, e)
         {
             if (e.getKey() != 13 && e.getKey() != 10 && e.getKey() != 127)
             {
                 if ((!e.shiftKey && (e.getKey() >= 65 && e.getKey() <= 90)) || ((e.getKey() >= 97 && e.getKey() <= 122) && e.shiftKey))
                 {
                     Ext.getCmp("app_idCAPSIndicator").setText("CAPS LOCK is ON");
                     Ext.getDom("app_idCAPSIndicator").style.color = "navy";

                 }
                 else
                 {
                     Ext.getCmp("app_idCAPSIndicator").setText("");
                 }
             }
             if (e.getKey() == 13)
             {
                 Ext.Msg.alert("Enter Pressed");
             }
         }
     }
 },
 {
     xtype: 'label',
     fieldLabel: '',
     labelWidth: 90,
     labelAlign: 'left',
     labelSeperator: '',
     id: 'app_idCAPSIndicator'
 }

但是它不起作用。我没有错误消息知道发生了什么。我在这里做什么错了？

Answer 1

添加enableKeyEvents：true，此true为启用HTML输入字段的键事件代理

{
     xtype:'textfield',
     itemId: 'field_password_login',
     fieldLabel: 'Password',
     inputType: 'password',
     allowBlank: false,
     enableKeyEvents: true,
     listeners:
     {
         keypress: function(tf, e)
         {
             if (e.getKey() != 13 && e.getKey() != 10 && e.getKey() != 127)
             {
                 if ((!e.shiftKey && (e.getKey() >= 65 && e.getKey() <= 90)) || ((e.getKey() >= 97 && e.getKey() <= 122) && e.shiftKey))
                 {
                     Ext.getCmp("app_idCAPSIndicator").setText("CAPS LOCK is ON");
                     Ext.getDom("app_idCAPSIndicator").style.color = "navy";

                 }
                 else
                 {
                     Ext.getCmp("app_idCAPSIndicator").setText("");
                 }
             }
             if (e.getKey() == 13)
             {
                 Ext.Msg.alert("Enter Pressed");
             }
         }
     }
 },

Answer 2

Ext.event.Event具有许多类型的按键的常数，包括大写锁定。另外，对于这种情况，有一个特定的事件处理程序，它是 specialkey 。因此，请扩展Moataz的答案：

{
     xtype:'textfield',
     itemId: 'field_password_login',
     fieldLabel: 'Password',
     inputType: 'password',
     allowBlank: false,
     enableKeyEvents: true,
     listeners:
     {
         specialkey: function(tf, e)
         {
                 if (e.getKey() == Ext.event.Event.CAPS_LOCK)
                 {
                     Ext.getCmp("app_idCAPSIndicator").setText("CAPS LOCK is ON");
                     Ext.getDom("app_idCAPSIndicator").style.color = "navy";
                 }
         }
     }
 }

您应该使用常量而不是数字来提高可读性。这就是Ext.event.Event具有键常量的原因之一。

ExtJS documentation定义被认为是特殊的键。

如果启用了Caps Lock，则ExtJS显示消息

2 个答案: