Detecting the caps lock key.

[Sherzod]

Hi All.

 

A simple example, which detects the capslock key and displays a warning.

Of course it is impossible to determine synchronously, but this code can be useful when your input type = "password" (perhaps the code is not optimal...)

 

UniEdit1 ... ->

function afterrender(sender, eOpts) {
  var capslock_td = document.createElement('td');
  capslock_td.setAttribute("id", "capslock_td");
 
  Ext.get(sender.id+"-inputRow").appendChild(capslock_td);
  //Ext.get(sender.id).appendChild(capslock_td);  
 
  capslock_td.innerHTML = "<table style='width:120px'><td></td><td><img width=16 height=16 src='ext-4.2.2.1144/resources/ext-theme-classic-sandbox/images/shared/icon-warning.gif'></td><td><span id='capslockspan' style='font-size:13px;'>CapsLock ON!</span></td></table>";
  capslock_td.hidden = true;
 
  Ext.onReady(function () {
    function _capsLockDetect(e) {
      if (!e) e = window.event || null;
      if (typeof (oncapslock) != "function" || !e) return;
      var n = e.keyCode ? e.keyCode : e.charCode;         
      if (e.type == "keypress") {
        var c = String.fromCharCode(n);
        var cUC = c.toUpperCase();
        var cLC = c.toLowerCase();                        
        if (cUC != cLC) oncapslock((e.shiftKey && cLC == c) || (!e.shiftKey && cUC == c));
      } else if (e.type == "keydown" && n == 20) oncapslock(false);
    }

    if (document.addEventListener) {
      document.addEventListener("keypress", _capsLockDetect, false);
      document.addEventListener("keydown", _capsLockDetect, false);
    } else if (document.attachEvent) {
      document.attachEvent("onkeypress", _capsLockDetect);
      document.attachEvent("onkeydown", _capsLockDetect);
    } else document.onkeypress = document.onkeydown = _capsLockDetect;

    window.oncapslock = function (on) {
      Ext.get("capslock_td").dom.hidden = !on
    }
  });
}

    

 

Best regards.

[choo]

Спасибо. Это то что сейчас  мне нужно

 

Thank you. This is what I need

[rencarnacion]

Excellent !!

[billyChou]

Thanks

[lagtto]

Where can I place this code?

[Sherzod]

Where can I place this code?

 

Hi,

 

in design time: UniEdit1->ClientEvents->ExtEvents add afterrender function:

 

 

Best regards.

[lagtto]

Thanks for your support, I placed the code at  UniEdit1->ClientEvents->ExtEvents add afterrender function:

but nothing happens. is there anything else that I could do.

 

Best regards.

[Sherzod]

Hi,

Can you attach a test case? (And your version of uniGUI, and what browser are you using?)

Best regards.

[lagtto]

Hi, I'm use 0.93 uniGUI, Delphi 2010 and google chrome.

And at the uniEdit, I did not understand where  I can set the input type = "password".

 

Best regards

[Sherzod]

Hi,

 

In design time:

UniEdit1.PasswordChar := '*';

(But this does not affect the script...) ok I'll try to check on the version 0.93...

 

Best regards.

[lagtto]

I managed to run the code.

 

Best regards.

 

[FFREDIANELLI]

How do you managed to run the code, i receive the error

 

Cannot read property 'appendChild' of null

[Sherzod]

Hi,

 

How do you managed to run the code, i receive the error

 

Cannot read property 'appendChild' of null

 

We can use this approach for now, but this is only if there is one password field on the form, but we can change it to all fields and optimize

function afterrender(sender, eOpts) {

    Ext.DomHelper.insertAfter(
        sender.triggerWrap, {
            id: 'capslock_td',
            tag: 'span',
            html: '<i class="fa fa-warning">CapsLock ON!</i>'
        },
        true);

    capslock_td.hidden = true;

    Ext.onReady(function() {
        function _capsLockDetect(e) {
            if (!e) e = window.event || null;
            if (typeof(oncapslock) != "function" || !e) return;
            var n = e.keyCode ? e.keyCode : e.charCode;
            if (e.type == "keypress") {
                var c = String.fromCharCode(n);
                var cUC = c.toUpperCase();
                var cLC = c.toLowerCase();
                if (cUC != cLC) oncapslock((e.shiftKey && cLC == c) || (!e.shiftKey && cUC == c));
            } else if (e.type == "keydown" && n == 20) oncapslock(false);
        }

        if (document.addEventListener) {
            document.addEventListener("keypress", _capsLockDetect, false);
            document.addEventListener("keydown", _capsLockDetect, false);
        } else if (document.attachEvent) {
            document.attachEvent("onkeypress", _capsLockDetect);
            document.attachEvent("onkeydown", _capsLockDetect);
        } else document.onkeypress = document.onkeydown = _capsLockDetect;

        window.oncapslock = function(on) {
            Ext.get("capslock_td").dom.hidden = !on
        }
    });
}

Best regards,

[FFREDIANELLI]

Thanks for the support !!!