Add touch event to Keypad for smoother operation

[Fairdinkum]

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