【JavaScript】キーイベント

キーイベント

キーイベント

スクリプト

function keyEvent(){
    this.init();
}

keyEvent.prototype = {
    init : function(){
        var self = this;

        self.metaflg = false;

        self.Enter = new Event('Enter');
        self.Space = new Event('Space');
        self.Backspace = new Event('Backspace');

        self.ctrlA = new Event('ctrlA');
        self.ctrlC = new Event('ctrlC');
        self.ctrlN = new Event('ctrlN');
        self.ctrlS = new Event('ctrlS');
        self.ctrlV = new Event('ctrlV');
        self.ctrlX = new Event('ctrlX');
        self.ctrlY = new Event('ctrlY');
        self.ctrlZ = new Event('ctrlZ');

        self.ArrowUp = new Event('ArrowUp');
        self.ArrowDown = new Event('ArrowDown');
        self.ArrowLeft = new Event('ArrowLeft');
        self.ArrowRight = new Event('ArrowRight');

        self.shiftArrowUp = new Event('shiftArrowUp');
        self.shiftArrowDown = new Event('shiftArrowDown');
        self.shiftArrowLeft = new Event('shiftArrowLeft');
        self.shiftArrowRight = new Event('shiftArrowRight');

        document.addEventListener('keypress', function(e){
            //e.preventDefault();
        });

        document.addEventListener('keydown', function(e){

            if(e.shiftKey){
                if(e.key==='ArrowUp'){
                    document.dispatchEvent(self.shiftArrowUp);
                }

                if(e.key==='ArrowDown'){
                    document.dispatchEvent(self.shiftArrowDown);
                }

                if(e.key==='ArrowLeft'){
                    document.dispatchEvent(self.shiftArrowLeft);
                }

                if(e.key==='ArrowRight'){
                    document.dispatchEvent(self.shiftArrowRight);
                }

            }else{
                if(e.key==='ArrowUp'){
                    document.dispatchEvent(self.ArrowUp);
                }

                if(e.key==='ArrowDown'){
                    document.dispatchEvent(self.ArrowDown);
                }

                if(e.key==='ArrowLeft'){
                    document.dispatchEvent(self.ArrowLeft);
                }

                if(e.key==='ArrowRight'){
                    document.dispatchEvent(self.ArrowRight);
                }
            }


            ///for MAC command
            if(e.key==='Meta'){
                self.metaflg = true;
            }
            self.fire(self.metaflg,e);

            if(self.metaflg){
                if(e.code === 'KeyZ' || e.code === 'KeyY' || e.code === 'KeyS'){
                    e.preventDefault();
                    return false;
                }
            }
        });

        document.addEventListener('keyup', function(e){

            if(e.code==='Space'){
                document.dispatchEvent(self.Space);
            }

            if(e.code==='Backspace'){
                document.dispatchEvent(self.Backspace);
            }

            if(e.code==='Enter'){
                document.dispatchEvent(self.Enter);
            }

            self.fire(e.ctrlKey,e);

            if(e.key==='Meta'){
                self.metaflg = false;
            }
        });

    },
    fire : function (ctrl,e) {
        var self = this;

        if(ctrl){
            if(e.key==='a'){
                document.dispatchEvent(self.ctrlA);
            }
            if(e.key==='c'){
                document.dispatchEvent(self.ctrlC);
            }
            if(e.key==='n'){
                document.dispatchEvent(self.ctrlN);
            }
            if(e.key==='s'){
                document.dispatchEvent(self.ctrlS);
            }
            if(e.key==='v'){
                document.dispatchEvent(self.ctrlV);
            }
            if(e.key==='x'){
                document.dispatchEvent(self.ctrlX);
            }
            if(e.key==='y'){
                document.dispatchEvent(self.ctrlY);
            }
            if(e.key==='z'){
                document.dispatchEvent(self.ctrlZ);
            }
        }
    }
};

使用方法

////生成
new keyEvent();


/////イベント
document.addEventListener('Space', function () {
    // Space
}, false);

document.addEventListener('Backspace', function () {
    // Backspace
}, false);

document.addEventListener('Enter', function () {
    // Enter
}, false);

document.addEventListener('ArrowUp', function () {
    // ArrowUp
}, false);

document.addEventListener('ArrowDown', function () {
    // ArrowDown
}, false);

document.addEventListener('ArrowLeft', function () {
    // ArrowLeft
}, false);

document.addEventListener('ArrowRight', function () {
    // ArrowRight
}, false);

document.addEventListener('shiftArrowUp', function () {
    // shiftArrowUp
}, false);

document.addEventListener('shiftArrowDown', function () {
    // shiftArrowDown
}, false);

document.addEventListener('shiftArrowLeft', function () {
    // shiftArrowLeft
}, false);

document.addEventListener('shiftArrowRight', function () {
    // shiftArrowRight
}, false);


document.addEventListener('ctrlA', function () {
    // ctrlA
}, false);

document.addEventListener('ctrlC', function () {
    // ctrlC
}, false);

document.addEventListener('ctrlN', function () {
    // ctrlN
}, false);

document.addEventListener('ctrlS', function () {
    // ctrlS
}, false);

document.addEventListener('ctrlV', function () {
    // ctrlV
}, false);

document.addEventListener('ctrlX', function () {
    // ctrlX
}, false);

document.addEventListener('ctrlY', function () {
    // ctrlY
}, false);

document.addEventListener('ctrlZ', function () {
    // ctrlZ
}, false);