[컴] js 에서 타이핑중인 글자를 얻는 방법

 

html 에서 / 한글 타이핑되고 있는 글자를 얻으려고 하는 경우 / keydown / keyup / vue example / 타이핑하는 한글 가져오는 방법

js 에서 타이핑중인 글자를 얻는 방법

여기서는 compositeupdate event 를 이용한다. compositeupdate event 는 ref.1 을 참고하자.

만약 아래 code에서 ’한라산’을 typing 한다고 하면, 아래처럼 log 가 찍힌다.

new-query : ㅎ / input-value : 
new-query : 하 / input-value : ㅎ
new-query : 한 / input-value : 하
new-query : 한 / input-value : 한
new-query : ㄹ / input-value : 한
new-query : 한라 / input-value : 한ㄹ
new-query : 한랏 / input-value : 한라
new-query : 한라 / input-value : 한랏
new-query : 한사 / input-value : 한라
new-query : 한라산 / input-value : 한라사

<template>
  <input
    @compositionupdate="onCompositionUpdate"
  />
</template>

<script>
import { useMessage, NSelect } from 'naive-ui'

import api from '@/utils/api.js'

// emit: ['select']
const _ = {
  ...
  data() {
    curInput: '',
    ...
  },

  methods: {

    async onCompositionUpdate(event){
      const curInput = this.curInput
      const curCharTyping = event.data
      const newQuery = curInput + curCharTyping
      console.log(`new-query : ${newQuery} / input-value : ${curInput}`)
    },
    async onCompositionEnd(event){
      this.curInput = event.target.value   // done compostion character
    },
}

export default _
</script>

Reference

1. Element: compositionupdate event - Web APIs | MDN