Jump to content
uniGUI Discussion Forums
Sherzod

Detecting the caps lock key.

Recommended Posts

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
    }
  });
}

post-906-0-64303700-1413524402_thumb.png     post-906-0-40945500-1413524420_thumb.png

 

Best regards.

  • Upvote 1

Share this post


Link to post
Share on other sites
Where can I place this code?

 

Hi,

 

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

 

post-906-0-51830600-1414784045_thumb.png

 

Best regards.

  • Upvote 1

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

post-2107-0-27409700-1415042155_thumb.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

×