왜 모바일에서는 키다운이 작동하지 않는가?버전 2

왜 모바일에서는 키다운이 작동하지 않는가?버전 2

저는 이렇게 시도합니다.

<template> 
    ...
    <input type="number" class="form-control" v-model="quantity" min="1" v-on:keydown="disableDot">
    ...                           
</template>
<script>
    export default{
        ...
        methods:{
            disableDot: function(evt) {
                evt = (evt) ? evt : window.event
                let charCode = (evt.which) ? evt.which : evt.keyCode
                if (charCode === 190 || charCode === 189 || charCode === 187) {
                    evt.preventDefault()
                } 
                else {
                    return true
                }
            }

        }
    }
</script>

코드가 실행되어 닷(.)을 입력해도 여전히 할 수 있습니다.

Dekstop에서는, 무효가 되어 있었습니다.단, 모바일에서는 이 기능을 무효로 하지 않습니다.

점을 비활성화합니다.사용자가 닷을 입력할 수 없습니다.

어떻게 해야 하죠?

메모

dekstop에서는 코드가 동작합니다.하지만 모바일에서는 코드가 작동하지 않습니다.모바일에서는 닷(.)이 비활성화되지 않습니다.

문제는 'keydown' 또는 'keyup'이 있는 키코드가 브라우저 간에 일관성이 없는 것처럼 보인다는 것입니다.OS에도 영향이 있을 수 있습니다.다양한 브라우저 및 모바일 디바이스에서 테스트 할 수 있습니다.

보다 일관성을 찾을 수 있을 것 같습니다.v-on:keypress이벤트 대신.빠른 테스트(모바일에서는 불완전한) 결과 '46'이 일관되게 반환됩니다.빠른 경고입니다. Android 키보드의 Firefox 모바일에서 '.'를 입력하면 두 개의 키 누르기 이벤트가 발생한다는 것을 알 수 있습니다.

//in template
<input type="number"  v-on:keypress="capturePress($event)">

//in methods
capturePress: function(event) {
    console.log(event.charCode);
}

이벤트도 돌아오기 때문에 꼭 봐 주셨으면 합니다. event.code = "Period"그리고.event.key = "."뿐이지만event.key = "."모바일 파이어폭스로 채워졌습니다.

console.log(event);

저는 워처를 사용하는 것이 가장 효과적이었습니다.다음과 같습니다.

<template> 
    ...
    <input type="number" class="form-control" v-model="quantity" min="1">
    ...                           
</template>
<script>
    export default{
        ...
        methods:{
            disableDot: function(evt) {
                evt = (evt) ? evt : window.event
                let charCode = (evt.which) ? evt.which : evt.keyCode
                if (charCode === 190 || charCode === 189 || charCode === 187) {
                    evt.preventDefault()
                } 
                else {
                    return true
                }
            }

        }

        watch: {
          "quantity"(value) {
            this.disableDot();
          }
        },
    }
</script>

Android 디바이스의 진짜 문제를 발견했습니다.양식의 자동 완성을 다음과 같이 비활성화해야 합니다.

 <form autocomplete="off" action="/action_page.php">

언급URL : https://stackoverflow.com/questions/46640328/why-keydown-not-working-in-mobile-vue-js-2