欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端如何監(jiān)聽(tīng)手機(jī)鍵盤(pán)是否彈起示例詳解

 更新時(shí)間：2024年02月04日 08:27:47   作者：我就不思  
實(shí)際應(yīng)用中我們會(huì)遇到監(jiān)聽(tīng)按鍵輸入和鼠標(biāo)點(diǎn)擊事件,這篇文章主要介紹了前端如何監(jiān)聽(tīng)手機(jī)鍵盤(pán)是否彈起的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

摘要：

開(kāi)發(fā)移動(dòng)端中，經(jīng)常會(huì)遇到一些交互需要通過(guò)判斷手機(jī)鍵盤(pán)是否被喚起來(lái)做的，說(shuō)到判斷手機(jī)鍵盤(pán)彈起和收起，應(yīng)該都知道，安卓和ios判斷手機(jī)鍵盤(pán)是否彈起的寫(xiě)法是有所不同的，下面討論總結(jié)一下兩端的區(qū)別以及上線(xiàn)方式~

HTML：

IOS端可以通過(guò) focusin focusout實(shí)現(xiàn)

window.addEventListener('focusin', () => {
  // 鍵盤(pán)彈出事件處理
  alert("ios鍵盤(pán)彈出事件處理")
});
window.addEventListener('focusout', () => {
  // 鍵盤(pán)收起事件處理
  alert("ios鍵盤(pán)收起事件處理")
})

安卓只能通過(guò) resize 來(lái)判斷屏幕大小是否發(fā)生變化來(lái)判斷

由于某些 Android 手機(jī)收起鍵盤(pán)，輸入框不會(huì)失去焦點(diǎn)，所以不能通過(guò)聚焦和失焦事件來(lái)判斷。但由于窗口會(huì)變化，所以可以通過(guò)監(jiān)聽(tīng)窗口高度的變化來(lái)間接監(jiān)聽(tīng)鍵盤(pán)的彈起與收回。

const innerHeight = window.innerHeight
window.addEventListener('resize', () => {
  const newInnerHeight = window.innerHeight;
  if (innerHeight > newInnerHeight) {
    // 鍵盤(pán)彈出事件處理
    alert("android 鍵盤(pán)彈出事件");     
  } else {
    // 鍵盤(pán)收起事件處理
    alert("android 鍵盤(pán)收起事件處理")
  }
})

VUE:

鍵盤(pán)事件總結(jié)：

  • @keydown：監(jiān)聽(tīng)鍵盤(pán)按下事件。
  • @keyup：監(jiān)聽(tīng)鍵盤(pán)抬起事件。
  • @keypress：監(jiān)聽(tīng)鍵盤(pán)按鍵事件，包括按下和抬起。
  • @keydown.enter：監(jiān)聽(tīng)回車(chē)鍵按下事件。
  • @keydown.tab：監(jiān)聽(tīng)Tab鍵按下事件。
  • @keydown.esc：監(jiān)聽(tīng)Esc鍵按下事件。
  • @keydown.space：監(jiān)聽(tīng)空格鍵按下事件。
  • @keydown.left：監(jiān)聽(tīng)左箭頭鍵按下事件。
  • @keydown.right：監(jiān)聽(tīng)右箭頭鍵按下事件。
  • @keydown.up：監(jiān)聽(tīng)上箭頭鍵按下事件。
  • @keydown.down：監(jiān)聽(tīng)下箭頭鍵按下事件。
  • @keydown.delete：監(jiān)聽(tīng)刪除鍵按下事件。
  • @keydown.backspace：監(jiān)聽(tīng)退格鍵按下事件。
  • @keydown.[key]：監(jiān)聽(tīng)其他特定鍵按下事件，例如@keydown.a監(jiān)聽(tīng)字母A鍵按下事件。

@keydown或@keyup指令來(lái)綁定鍵盤(pán)按鍵事件

<template>
  <div>
    <input type="text" @keydown.enter="handleEnterKey" />
  </div>
</template>

<script>
export default {
  methods: {
    handleEnterKey() {
      // 處理回車(chē)鍵按下事件
    },
  },
};
</script>

v-on指令來(lái)綁定鍵盤(pán)按鍵事件

<template>
  <div>
    <input type="text" v-on:keydown.enter="handleEnterKey" />
  </div>
</template>

<script>
export default {
  methods: {
    handleEnterKey() {
      // 處理回車(chē)鍵按下事件
    },
  },
};
</script>

window.addEventListener來(lái)全局監(jiān)聽(tīng)鍵盤(pán)按鍵事件

<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('keydown', this.handleKeyDown);
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === 'Enter') {
        // 處理回車(chē)鍵按下事件
      }
    },
  },
};
</script>

vue-shortkey插件來(lái)監(jiān)聽(tīng)鍵盤(pán)按鍵

<template>
  <div>
    <input type="text" v-shortkey.enter="handleEnterKey" />
  </div>
</template>

<script>
import VueShortkey from 'vue-shortkey';

export default {
  directives: {
    shortkey: VueShortkey,
  },
  methods: {
    handleEnterKey() {
      // 處理回車(chē)鍵按下事件
    },
  },
};
</script>

keydown事件監(jiān)聽(tīng)器

<template>
  <div>
    <input type="text" ref="input" />
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.input.addEventListener('keydown', this.handleKeyDown);
  },
  beforeUnmount() {
    this.$refs.input.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === 'Enter') {
        // 處理回車(chē)鍵按下事件
      }
    },
  },
};
</script>

監(jiān)聽(tīng)事件組件封裝：

<template>
  <div></div>
</template>

<script>
export default {
  name: 'KeyboardEventListener',
  props: {
    event: {
      type: String,
      required: true,
    },
  },
  mounted() {
    window.addEventListener(this.event, this.handleEvent);
  },
  beforeUnmount() {
    window.removeEventListener(this.event, this.handleEvent);
  },
  methods: {
    handleEvent(event) {
      this.$emit('keydown', event);
    },
  },
};
</script>

可以在需要監(jiān)聽(tīng)鍵盤(pán)事件的地方引入并使用KeyboardEventListener組件，并通過(guò)event屬性傳遞需要監(jiān)聽(tīng)的事件名稱(chēng)，同時(shí)監(jiān)聽(tīng)keydown事件來(lái)處理具體的按鍵邏輯。

<template>
  <div>
    <KeyboardEventListener event="keydown.enter" @keydown="handleEnterKey" />
  </div>
</template>

<script>
import KeyboardEventListener from '@/components/KeyboardEventListener.vue';

export default {
  components: {
    KeyboardEventListener,
  },
  methods: {
    handleEnterKey(event) {
      // 處理回車(chē)鍵按下事件
    },
  },
};
</script>

通過(guò)封裝組件，可以在需要監(jiān)聽(tīng)鍵盤(pán)事件的地方直接引入并使用，避免重復(fù)的監(jiān)聽(tīng)和處理邏輯，提高代碼的可維護(hù)性和復(fù)用性

REACT:

在需要進(jìn)行監(jiān)聽(tīng)的Dom上添加 onKeyDown 方法：

<Button
     className='btn-add'
     type="primary"
     icon="search"
     onKeyDown={(e)=>this.handleKeyDown(e)}
     onClick={()=>this.handleSearch()}>
     {LangMapping.Search}
 </Button>

定義 handleKeyDown 方法及事件處理：

//keyCode 38=up arrow  40=down arrow   13=Enter
handleKeyDown = (e) => {
    if (e.keyCode === 13) {
        console.log("按下了Enter鍵")
        this.handleSearch();
    }
}

在 componentDidMount 鉤子中定義鍵盤(pán)監(jiān)聽(tīng)事件：

componentDidMount() {
    document.addEventListener('keydown',this.handleKeyDown);
}

在 componentWillUnmount 鉤子中移除鍵盤(pán)監(jiān)聽(tīng)事件：

componentWillUnmount() {
    document.removeEventListener('keydown',this.handleKeyDown);
}

ANGULAR:

檢測(cè)鍵盤(pán)按下事件:可以使用ng-keydown指令。該指令可以監(jiān)聽(tīng)指定元素上的鍵盤(pán)按下事件，并在按下事件發(fā)生時(shí)調(diào)用指定的表達(dá)式

<input type="text" ng-keydown="handleKeyDown($event)">

我們?cè)谝粋€(gè)文本輸入框上使用了ng-keydown指令，并將handleKeyDown函數(shù)綁定到該事件上。當(dāng)用戶(hù)按下鍵盤(pán)上的任意鍵時(shí)，handleKeyDown函數(shù)將被調(diào)用。

$scope.handleKeyDown = function(event) {
  console.log('Key down event:', event);
};

handleKeyDown函數(shù)接收一個(gè)事件對(duì)象作為參數(shù)。我們可以通過(guò)該事件對(duì)象來(lái)獲取按下的鍵的信息，例如鍵碼（keyCode）、鍵的字符表示（key）等

檢測(cè)按鍵事件:可以使用ng-keypress指令。該指令可以監(jiān)聽(tīng)指定元素上的按鍵事件，并在按鍵事件發(fā)生時(shí)調(diào)用指定的表達(dá)式

<input type="text" ng-keypress="handleKeyPress($event)">

在一個(gè)文本輸入框上使用了ng-keypress指令，并將handleKeyPress函數(shù)綁定到該事件上。當(dāng)用戶(hù)按下并且釋放某個(gè)鍵時(shí)，handleKeyPress函數(shù)將被調(diào)用

$scope.handleKeyPress = function(event) {
  console.log('Key press event:', event);
};

與ng-keydown指令類(lèi)似，handleKeyPress函數(shù)也接收一個(gè)事件對(duì)象作為參數(shù)，我們可以通過(guò)該事件對(duì)象來(lái)獲取按下的鍵的信息

區(qū)分按鍵類(lèi)型:

有時(shí)候，我們可能需要區(qū)分按下的是哪種類(lèi)型的按鍵，例如字母鍵、數(shù)字鍵、功能鍵等。在AngularJS中，我們可以使用事件對(duì)象的屬性來(lái)區(qū)分按鍵類(lèi)型

  • event.key：按下的鍵的字符表示，例如’a’、’0’、’Enter’等。
  • event.keyCode：按下的鍵的鍵碼表示，對(duì)應(yīng)于鍵盤(pán)上每個(gè)鍵的唯一標(biāo)識(shí)。
  • event.shiftKey：按下了Shift鍵。
  • event.ctrlKey：按下了Ctrl鍵。
  • event.altKey：按下了Alt鍵。

通過(guò)檢查事件對(duì)象的這些屬性，我們可以根據(jù)需要來(lái)區(qū)分按鍵類(lèi)型

$scope.handleKeyDown = function(event) {
  if (event.key === 'Enter') {
    console.log('Enter key pressed');
  } else if (event.keyCode >= 48 && event.keyCode <= 57) {
    console.log('Number key pressed');
  } else {
    console.log('Other key pressed');
  }
};

們根據(jù)按下的鍵的字符表示和鍵碼表示來(lái)區(qū)分按鍵類(lèi)型。如果按下的是Enter鍵，則輸出”Enter key pressed”；如果按下的是數(shù)字鍵，則輸出”Number key pressed”；如果按下的是其他鍵，則輸出”Other key pressed”。

總結(jié)

到此這篇關(guān)于前端如何監(jiān)聽(tīng)手機(jī)鍵盤(pán)是否彈起的文章就介紹到這了,更多相關(guān)前端監(jiān)聽(tīng)手機(jī)鍵盤(pán)是否彈起內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論