[vue.js] v-text-field 한글 입력 막기

이슈

이번 프로젝트에서 eye 아이콘을 클릭하면 type=text로 변경 되고 다시 클릭하면 type=password로 변경되는 영역이 있다. type=password일때는 한글입력이 안되지만 type=text일때는 한글입력이 된다.

* 참고 url : vuetifyjs.com/en/components/text-fields/#password-input

Text field component

이슈 - 소스

<template>
  <div class="container">
    <div>
      <h1 class="title">
        한글막기 테스트
      </h1>
    </div>
    <v-text-field 
      class="text-content" 
      :type="show1 ? 'text' : 'password'"
      v-model="password"
      :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
      @click:append="show1 = !show1"
       >
    </v-text-field>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show1: false,
      password: '',
    }
  },
}
</script>

이슈 - 테스트

 

해결

v-text-field 영역에 oninput를 이용하여 한글 입력시에 정규식을 이용하여 replace를 해준다.

oninput="javascript: this.value = this.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '' );"

해결 - 소스

<template>
  <div class="container">
    <div>
      <h1 class="title">
        한글막기 테스트
      </h1>
    </div>
    <v-text-field 
      class="text-content" 
      :type="show1 ? 'text' : 'password'"
      v-model="password"
      :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
      @click:append="show1 = !show1"
      oninput="javascript: this.value = this.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '' );"
       >
    </v-text-field>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show1: false,
      password: '',
    }
  },
}
</script>

해결 - 테스트