VueJ: 텍스트 영역의 기본 동작을 방지하는 방법
(시프트를 누르지 않고) 정확한 Enter 키를 누를 때만 메시지를 보내는 슬랙라이크 기능을 구현하려고 합니다.
이 vue 템플릿 고려 <textarea type="text" v-model="message" @keyup.enter.exact="sendMessage($event)"></textarea> 이 컴포넌트를 사용하여
export default {
name: 'Typing',
data() {
return {
message: null
}
},
methods: {
sendMessage(e) {
// e.stopPropagation() and e.preventDefault() have no impact
this.$socket.emit('message', { text: this.message });
console.log(this.message); // Print the message with another '\n' at the end due to textarea default behavior
}
}
}
백엔드로 전송하기 전에 regex를 사용하여 삭제하지 않고 마지막 '\n'을 사용하는 방법을 알고 있는 사람이 있습니까?
감사합니다.
PS: 저는 VueJs 스택에 대해 잘 모르기 때문에 질문이 명확하지 않았으면 합니다.
편집: 이 질문은 비슷하지만 제안된 솔루션이 작동하지 않습니다.
문제
<textarea
type="text"
v-model="message"
@keyup.enter.exact="sendMessage($event)"
>
</textarea>
이 코드는sendMessage의 메서드keyup키 이벤트입니다.그keyup키가 해제된 후 이벤트가 발생합니다.따라서 키가 눌린 후, 키 실행의 기본 동작(새 줄 입력) 후 및 키가 해제된 후 코드가 메서드를 호출합니다. preventDefault방지하려는 동작이 이미 발생했기 때문에 문제를 예방할 수 없습니다.keyup이벤트입니다.
솔루션
이하를 확인했습니다.
- 키를 누르는 기본 동작을 방지하고자 합니다.
- 그
keyup이벤트는 기본 동작이 이미 발생한 후에 실행됩니다.
해결방법은 디폴트 동작을 방지하는 것입니다.keydown이벤트 및 호출 메서드keyup이벤트입니다.
주의: 중요한 것은 위의 메서드만 호출하는 것입니다.
keyup사용자가 키를 누르고 있을 때 여러 콜을 회피하기 위한 이벤트입니다.
<textarea
v-model="value"
@keydown.enter.exact.prevent
@keyup.enter.exact="send"
@keydown.enter.shift.exact="newline"
>
</textarea>
텍스트 영역 값에 새 행을 추가하는 메서드는 Shift+ 조합을 누르면 호출할 수 있습니다.
아래는 솔루션에 설명된 모든 행동을 보여주는 단편입니다.
new Vue({
template: `
<div>
<textarea
v-model="value"
@keydown.enter.exact.prevent
@keyup.enter.exact="send"
@keydown.enter.shift.exact="newline"
>
</textarea>
</div>
`,
data: {
value: '',
},
methods: {
newline() {
this.value = `${this.value}\n`;
},
send() {
console.log('========');
console.log(this.value);
console.log('========');
},
},
}).$mount('#root');<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
</body>
</html>추가 정보
- 키보드 이벤트용 W3C 사양
- 특히 이벤트 순서와 이벤트 유형
고객의 문제 해결 방법은 다음과 같습니다.
new Vue({
el: '#app',
data: {
message: ''
},
methods: {
sendMessage () {
console.log(this.message, this.message.length)
// this.$socket.emit('message', {text: this.message});
// clear textarea: this.message = ''
}
}
})<div id="app">
<textarea v-model="message" @keydown.enter.exact.prevent="sendMessage"></textarea>
</div>
<script src="https://unpkg.com/vue"></script>Vue 기본 제공 사용 시도prevent
<textarea type="text" v-model="message" @keyup.enter.exact.prevent="sendMessage($event)"></textarea>
언급URL : https://stackoverflow.com/questions/47221119/vuejs-how-to-prevent-textarea-default-behavior
'programing' 카테고리의 다른 글
| 연결된 데이터가 변경된 후 Vue 구성 요소가 즉시 업데이트되지 않음 (0) | 2022.06.17 |
|---|---|
| C89, C90 또는 C99의 모든 기능에 시제품이 필요합니까? (0) | 2022.06.17 |
| 비트 비연산자 (0) | 2022.06.16 |
| 텍스트 센터를 Android에 맞추다 (0) | 2022.06.16 |
| intersectionObserver/Scrollspy가 있는 요소의 특정 클래스를 표시하려면 어떻게 해야 합니까? (0) | 2022.06.16 |