iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 14
0

通常聊天都會習慣直接輸入Enter送出訊息,而且我們介面上也完全沒有要做按鈕XD當然要偽裝terminal也是直接用鍵盤送出~這篇就來做事件處理

平常會用addEventListener來做偵聽

document.addEventListener('click', func)
document.addEventListener('keyup', func)

不過vue有直接提供v-on事件處理,平常會用到click、keyup、dbclick這些事件,在vue裡都是用v-on做事件綁定,這樣也不需要一直做addEventListener,方便許多

<button v-on:click="func">按鈕</button>
<input type="text" v-on:keyup="func" />

並且也有提供省略的寫法v-on:改成@

<button @click="func">按鈕</button>
<input type="text" @keyup="func" />
<script>
  export default {
    methods: {
      func(){ // 觸發事件
        console.log('abc')
      }
    }
  };
</script>

延續上篇,把input加上鍵盤事件

<input type="text" v-model="memberName" @keyup="keyHandler" />
<script>
  export default {
    data(){
      return {
        memberName: ''
      }
    },
    methods: {
      keyHandler(e){ 
        console.log(e.keycode)
      }
    }
  };
</script>

只要在input中輸入任何按鍵,就會觸發keyHandler(),e.keyCode可以判斷是按哪個鍵,以前判斷ENTET會用e.keycode===13,不過目前這個用法要廢棄了,現在直接判斷e.key==='Enter'就可以嚕

需要查什麼鍵盤按鍵可以到這裡

不過呢,說了這麼多,最後都沒有要用(被打)

最後要用的是vue提供的語法糖@keyup.enter

<input type="text" v-model="memberName" @keyup.enter="keyHandler" />

這樣就只會在輸入enter之後觸發事件,棒棒!


最後曬個手作檸檬蛋糕

https://ithelp.ithome.com.tw/upload/images/20190930/20111962t0eegcwro4.jpg

雖然是失敗作


上一篇
十三號坑,輸入訊息-v-model
下一篇
十五號坑,匿名登入的行前說明Socket事件
系列文
每日挖個坑,用坑填起耍廢聊天室!30

2 則留言

0
King Tzeng
iT邦新手 4 級 ‧ 2019-09-30 14:01:38

老闆~一個蛋糕外送!(肚子餓/images/emoticon/emoticon31.gif

來我家玩R(誒

0
ayugioh2003
iT邦新手 5 級 ‧ 2019-09-30 20:19:31

感謝介紹鍵盤事件 ~ 第一次知道 MDN 可以看到鍵碼值表 XD

BTW,這段話中的 現在直接判斷 e.keycode==='Enter' 就可以嚕,是不是指 e.key===Enter

只要在 input 中輸入任何按鍵,就會觸發 keyHandler (),e.keycode 可以判斷是按哪個鍵,以前判斷 ENTET 會用 e.keycode===13,不過目前這個用法要廢棄了,現在直接判斷 e.keycode==='Enter' 就可以嚕

恩對,我寫錯了XD
立刻改~感謝

我要留言

立即登入留言