Jump to content


Photo

Detecting the caps lock key.

caps lock capslock

  • Please log in to reply
13 replies to this topic

#1 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5177 posts

Posted 17 October 2014 - 05:40 AM

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

Attached File  capslock1.png   1.75KB   59 downloads     Attached File  capslock2.png   1.68KB   58 downloads

 

Best regards.


  • 1

#2 choo

choo

    Member

  • Members
  • PipPip
  • 17 posts

Posted 17 October 2014 - 07:52 AM

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

 

Thank you. This is what I need


  • 0

#3 Ronny Encarnacion

Ronny Encarnacion

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 539 posts

Posted 17 October 2014 - 12:15 PM

Excellent !!


  • 0

Ronny Encarnacion


#4 billyChou

billyChou

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 126 posts

Posted 19 October 2014 - 10:21 AM

Thanks


  • 0

#5 lagtto

lagtto

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 31 October 2014 - 12:41 PM

Where can I place this code?


  • 0

#6 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5177 posts

Posted 31 October 2014 - 07:34 PM

Where can I place this code?

 

Hi,

 

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

 

Attached File  capslock.png   122.05KB   46 downloads

 

Best regards.


  • 1

#7 lagtto

lagtto

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 03 November 2014 - 12:20 PM

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.


  • 0

#8 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5177 posts

Posted 03 November 2014 - 05:33 PM

Hi,

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

Best regards.


  • 0

#9 lagtto

lagtto

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 03 November 2014 - 07:23 PM

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

Attached Files


  • 0

#10 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5177 posts

Posted 03 November 2014 - 07:27 PM

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.


  • 0

#11 lagtto

lagtto

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 05 November 2014 - 07:28 PM

I managed to run the code.

 

Best regards.

 


  • 0

#12 FFREDIANELLI

FFREDIANELLI

    Member

  • uniGUI Subscriber
  • PipPip
  • 30 posts
  • LocationCaçador - SC - Brasil

Posted 11 May 2018 - 02:26 PM

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

 

Cannot read property 'appendChild' of null


  • 0

#13 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5177 posts

Posted 21 May 2018 - 05:33 PM

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,


  • 0

#14 FFREDIANELLI

FFREDIANELLI

    Member

  • uniGUI Subscriber
  • PipPip
  • 30 posts
  • LocationCaçador - SC - Brasil

Posted 21 May 2018 - 08:56 PM

Thanks for the support !!!  :D


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users