Jump to content

Detecting the caps lock key.


Sherzod

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

  • 2 weeks later...
  • 3 years later...
  • 2 weeks later...

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,

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...