如果 Caps Lock 打開，ExtJS 會顯示消息

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 文檔定義了被認為是特殊的鍵。