8. 상호작용 2. `Keydown` 이벤트 처리. 활성 키 상태

Keydown event handling

activeKey state

Operational System (OS) language

Active key styling

Fade active key after a while

Keydown 이벤트 처리

파일Keyboard.js에서 mounted()의 이벤트 리스너를 keydown에 추가합니다.

    mounted() {
        this.getKeyboardData(this.currentLang)

        /* add: */
        window.addEventListener('keydown', event => {
            e.preventDefault()
            console.log(event)
        })
    },

파일을 저장합니다.

Chrome 개발자 도구 탭console을 엽니다. 앱에서 마우스로 클릭하면 이벤트를 포착할 수 있는 창이 활성화됩니다. (물리적) 키보드에서 임의의 키를 누릅니다. 이벤트는 콘솔에 나타납니다.



다른 키로 실험하고 결과를 확인하십시오. KeyboardEvent를 확장하고 속성을 확인합니다. code , key 및 shiftKey 3개만 필요합니다.

콘솔을 닫습니다(개발 도구).

Diffs in code 8.1

활성키 상태

Keyboard.js data()에서 새 상태activeKey를 추가합니다. { code, key, shiftKey } 에서 event 로 채워집니다. 템플릿에 activeKey를 추가하여 어떻게 변경되는지 확인하세요.

Keyboard.js

import Key from './Key.js'

const Keyboard = {
    template: `
    <div>activeKey: {{activeKey}}</div>
    <div class="keyboard">
        <div
            v-for="(row, index) in keyboardData"
            :class="['row', 'row-'+(index+1)]"
        >
            <vue-key
                v-for="keyContent in row"
                :keyContent="keyContent"
            />
        </div>
    </div>`,
    components: {
        'vue-key': Key
    },
    data() {
        return {
            keyboardData: [],
            /* add: */
            activeKey: { code: '' }
        }
    },
    props: {
        currentLang: String
    },
    watch: {
        currentLang: function (currentLang) {
            this.getKeyboardData(currentLang)
        }
    },
    mounted() {
        this.getKeyboardData(this.currentLang)

        window.addEventListener('keydown', event => {
            event.preventDefault()
            /* add: (read particular props of event) */
            const { code, key, shiftKey } = event
            /* write event parts to the state: */
            this.activeKey = { code, key, shiftKey }
        })
    },

    methods: {
        async getKeyboardData(lang) {
            const { default: keyboardData } = await import(
                `../keyboardData/${lang}.js`
            )
            this.keyboardData = keyboardData
        }
    }
}

export default Keyboard

모든 언어 레이아웃(q, w , en , ru )에서 ar를 누릅니다.

결과:

운영 체제(OS) 언어

동일한 이벤트가 any currentLang 에서 발생한다는 것을 알 수 있습니다. 웹 앱 상태가 OS 언어(키보드용)와 연결되어 있지 않기 때문입니다. 그리고 이를 수행할 수 있는 기술적 능력이 없습니다.

사용자가 OS에서 언어를 전환하면(alt+shift, ctrl+shift) 이벤트 속성key이 달라지지만 우리 앱은 OS에 어떤 언어가 설정되어 있는지 알 수 없습니다.

어쨌든 code는 항상 동일합니다. 이것이 data model 에서 필수 식별자로 만든 이유입니다.

활성 키 스타일링

Keyboard.js에서 state activeKey를 prop으로 Key에 전달합니다. 그리고 새 소품에 대해 Key에게 경고합니다.

Keyboard.js 템플릿:

<vue-key ... :activeKey="activeKey" />

Key.js 소품:

props: {
    ...
    activeKey: Object,
}

이제 activeKey 구성 요소 내에서 Key를 사용하여 키 중 하나(활성 키)에 조건부 스타일을 적용할 수 있습니다.

Key.js 템플릿:

바꾸다

<div class="key">
    <div class="main">{{main}}</div>
    <div class="shifted">{{shifted}}</div>
</div>

와 함께:

<div
    :class="[
            'key', 
            {active: activeKey.code === keyContent.code}
            ]"
>
    <div class="main">{{main}}</div>
    <div class="shifted">{{shifted}}</div>
</div>

이제:class는 동적(계산됨, 가변)입니다.

스타일key은 어떤 경우에도 버튼(키)에 적용됩니다.

스타일active은 키code가 activeKey의 코드와 동일한 경우에만 적용됩니다. 2장에서 .key.active에 styles.css 스타일을 추가했습니다.

결과:



모든 언어에서 작동하며 키보드의 시스템 언어에 의존하지 않습니다.

잠시 후 활성 키 페이드

문제가 있습니다. 버튼을 누른 다음 아무 것도 누르지 않으면 activeKey가 영원히 남습니다. 그러나 우리는 그것이 잠시 후에 사라지기를 원합니다.
Keyboard.js에서 addEventListener:

~ 후에

this.activeKey = { code, key, shiftKey }

추가하다

setTimeout(() => (this.activeKey = { code: '' }), 1000)

즉, 1000밀리초(1초) 후에 activeState가 지워집니다.

결과:



보기 좋게 활성 키는 1초 후에 자동으로 사라집니다.

그러나 또 다른 문제가 있습니다. 1초 안에 여러 키를 빠르게 입력하면 첫 번째 버튼을 누른 후 시작된 하나의 타이머만 작동합니다. 900밀리초에 1, 2, 3, 4, 5를 입력하면 5가 100밀리초 후에 사라지는데 이는 잘못된 것입니다.



우리는 5를 (다른 키와 마찬가지로) 존중하고 전체 1초를 제공합니다. 그렇게 하려면 키를 눌렀을 때 특정 키timeout를 저장해야 하며 시간 초과가 끝나기 전에 다른 키를 누르면 이전 키timeout를 지우고 새 키를 만듭니다. 그러면 모든 키에 대해 1초가 보장됩니다.

App.js

바꾸다

setTimeout(() => (this.activeKey = { code: '' }), 1000)

~와 함께

/* if there was old timeout, we clear it*/
clearTimeout(this.timeout)
/* store a new timeout for the last pressed key */
this.timeout = setTimeout(() => (this.activeKey = { code: '' }), 1000)

이제 5도 1초 안에 세상에 자신을 보여줄 수 있습니다.



Diffs in code 8.2

Entire code after the chapter