Add touch event to Keypad for smoother operation

Use this Forum to post tips and techniques for using aXes. Please explain in detail. This Forum is managed by the aXes user community. LANSA cannot guarantee the accuracy of any information posted to this Forum.

Moderator: jeanmichel

Post Reply
Fairdinkum
Posts: 97
Joined: 24 Jul 2017, 17:02

Add touch event to Keypad for smoother operation

Post by Fairdinkum » 17 May 2021, 11:51

Hi,

We have just tested to add a touch event to the Keypad extension for smoother operation on mobile devices which support the touch event.

As you can see from the following video, a keypad appeared above accepts numbers on the keypad much smoother than the below one.
https://drive.google.com/file/d/1I1uyBS ... sp=sharing

(onFocus)

Code: Select all

USERENV.addTouchEvents();
(USERENV)

Code: Select all

    addTouchEvents  : function() {
        var uA = navigator.userAgent;
        if ( uA.indexOf("iPhone") >= 0 || uA.indexOf("iPad") >= 0 || uA.indexOf("iPod") >= 0 || uA.indexOf("Android") >= 0 )
        {
            var isTouchDevice = true;
        } else {
            var isTouchDevice = false;
        }
        if ( isTouchDevice )
        {
            // clickイベントの取得
            var events = $._data($('.keypad-key').get(0), "events");
            var events2 = $._data($('.keypad-close').get(0), "events");
            var events3 = $._data($('.keypad-clear').get(0), "events");
            var events4 = $._data($('.keypad-back').get(0), "events");
            var keypushHandler = events.click[0].handler;
            var keypushHandler2 = events2.click[0].handler;
            var keypushHandler3 = events3.click[0].handler;
            var keypushHandler4 = events4.click[0].handler;
            // 元のclickイベントを外す
            $('.keypad-key').off('click', keypushHandler);
            $('.keypad-close').off('click', keypushHandler2);
            $('.keypad-clear').off('click', keypushHandler3);
            $('.keypad-back').off('click', keypushHandler4);
            // touchendイベントの追加
            var target = document.getElementsByClassName("keypad-close");
            for( var i = 0; i < target.length; i++ )
            {
                target[i].addEventListener("touchstart", keypushHandler2);
            }
            var target = document.getElementsByClassName("keypad-clear");
            for( var i = 0; i < target.length; i++ )
            {
                target[i].addEventListener("touchstart", keypushHandler3);
            }
            var target = document.getElementsByClassName("keypad-back");
            for( var i = 0; i < target.length; i++ )
            {
                target[i].addEventListener("touchstart", keypushHandler4);
            }
            var target = document.getElementsByClassName("keypad-key");
            for( var i = 0; i < target.length; i++ )
            {
                target[i].addEventListener("touchstart", keypushHandler);
            }
        }
    },
If you are interested, why don't you try it out! (There might be still something should be corrected in the code above)

Regards,
Hide

Post Reply