Edge 텍스트의×버튼(지우기 버튼).js로 감지되지 않음

표제와 같다.대충 Vue를 사용하는 분들은 아시겠지만, 일단 미리 싣겠습니다.
해결 방안이 매우 미묘하다.이런 팁을 사용하지 말고 브라우저나 Vue에서 방법을 생각해 주시기 바랍니다.

창 입력 귀속

Vue에서는 v-model을 사용하여 input 요소와 데이터를 양방향으로 연결할 수 있습니다.편리
창 입력 바인딩(Vue 공식 페이지)
https://jp.vuejs.org/v2/guide/forms.html

  <input type="text" v-model="message">
  <p>message: {{ message }}</p>

data: {
    message: '',
},

Edge 텍스트의×누름단추

아래 그림×버튼을 누릅니다.이 단추를 누르면 텍스트 내용을 한꺼번에 지울 수 있습니다.이 기능 자체는 매우 편리하다.

그러나 외관상으로는 사라졌지만 Vue의 값은 업데이트되지 않았다.매우 난처하다.

솔루션 1:×버튼 표시 안 함

CSS에서: [ms-Clear를 숨깁니다.뚜껑을 더러운 것 위에 덮어라.
다만 이것은 통관 기능을 제한한 것일 뿐 좋은 해결책이라고 할 수는 없다.

input[type=text]::-ms-clear {
  display: none;
}

솔루션 2: 포커스 출력 확인 시 입력한 값

Vue에서 ref 속성을 사용하면 요소 자체에 직접 접근할 수 있습니다.
이 방법을 사용하면 출력에 초점을 맞출 때 실제 입력한 값을 직접 가져오거나 Vue의 값을 업데이트할 수 있습니다.
입력 값을 실시간으로 반영하지 않아도 되는 웹 형식에서는 유효합니다.
(예: 사용자가 정보를 입력하고 마지막으로 저장한 화면)
하지만 저는 개인적으로 이 해결 방안을 좋아하지 않습니다.어쩔 수 없지만 요소를 직접 참조하는 방법은 Vue 지침에 맞지 않는다.안 예뻐요.

  <input ref="text" type="text" v-model="message" @focusout="focusout">
  <p>message: {{ message }}</p>

methods: {
    focusout(){
        // $refs.textを取得し、更新
        this.message = this.$refs.text.value;
    },
},

×버튼을 눌렀는데도 값이 남아있어요.

초점을 맞출 때 값을 업데이트할 수 있습니다.

할 수 없다

이렇게 50개 정도의 해결 방안만 있다.가능하다면 이 방안을 사용하세요.
더 좋은 방안이 있다면 꼭 기다릴게요.
2019/09/17에도 추기 댓글이 달렸지만, 어떻게든 기능을 지우고 싶다면 스스로 텍스트 영역 옆에 지우기 버튼을 만들면 된다.참고로 제공하다.