天給小伙伴們推薦一款超酷的 Vue 模擬鍵盤組件VueSimpleKeyboard。

vue-simple-keyboard 一個(gè)可定制 自適應(yīng) 輕量級(jí)的虛擬鍵盤vue.js組件。支持自定義主題，手機(jī)端和IOS風(fēng)格、數(shù)字鍵盤等功能。

特性

• 支持vue不需要額外的插件
• 可定制性選項(xiàng)和方法
• 自適應(yīng)布局
• 支持自動(dòng)更正，輸入掩碼等功能
• 支持多鍵盤實(shí)例
• 提供豐富的演示demos

安裝

$ npm i simple-keyboard -S

SimpleKeyboard.vue

<template>
  <div :class="keyboardClass"></div>
</template>

<script>
import Keyboard from "simple-keyboard";
import "simple-keyboard/build/css/index.css";

export default {
  props: {
    keyboardClass: {
      default: "simple-keyboard", type: String
    },
    input: {
      type: String
    }
  },
  data: ()=> ({
    keyboard: null
  }),
  mounted() {
    this.keyboard=new Keyboard({
      onChange: this.onChange,
      onKeyPress: this.onKeyPress
    });
  },
  methods: {
    onChange(input) {
      this.$emit("onChange", input);
    },
    onKeyPress(button) {
      this.$emit("onKeyPress", button);
    }
  },
  watch: {
    input(input) {
      this.keyboard.setInput(input);
    }
  }
};
</script>

使用插件

<template>
  <div>
    <input
      :value="input"
      class="input"
      @input="onInputChange"
      placeholder="Tap on the virtual keyboard to start"
    >
    <vue-simple-keyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input"></vue-simple-keyboard>
  </div>
</template>

<script>
import VueSimpleKeyboard from "./SimpleKeyboard";

export default {
  components: {
    VueSimpleKeyboard
  },
  data: ()=> ({
    input: ""
  }),
  methods: {
    onChange(input) {
      this.input=input;
    },
    onKeyPress(button) {
      console.log("button", button);
    },
    onInputChange(input) {
      this.input=input.target.value;
    }
  }
};
</script>

提供豐富的演示實(shí)例及API文檔

附上文檔及倉(cāng)庫(kù)地址

# 文檔地址
https://virtual-keyboard.js.org/vuejs/

# 演示地址
https://hodgef.com/simple-keyboard/demos/

# github地址
https://github.com/simple-keyboard/vue-simple-keyboard

好了，就分享到這里。感謝大家的閱讀。如果有什么好的想法歡迎留言討論哈！

面試官：實(shí)現(xiàn)一個(gè)吸附在鍵盤上的輸入框 —— 解密移動(dòng)端富交互設(shè)計(jì)的實(shí)戰(zhàn)秘籍

**引言**

在移動(dòng)應(yīng)用開發(fā)中，為提升用戶體驗(yàn)，經(jīng)常會(huì)遇到一種特殊的交互需求：實(shí)現(xiàn)一個(gè)跟隨鍵盤彈出和收縮的輸入框，讓用戶在聊天、評(píng)論等場(chǎng)景下無(wú)需頻繁滾動(dòng)界面即可直接輸入。本文將深入剖析這種“吸附在鍵盤上的輸入框”的實(shí)現(xiàn)原理與實(shí)戰(zhàn)代碼，幫助你從容應(yīng)對(duì)面試官的此類提問(wèn)，同時(shí)也能讓你在實(shí)際項(xiàng)目中得心應(yīng)手地應(yīng)用這一技術(shù)。

**一、問(wèn)題分析與設(shè)計(jì)思路**

1. **監(jiān)聽鍵盤彈出與關(guān)閉事件**

移動(dòng)端可通過(guò)監(jiān)聽`resize`事件或原生API（如iOS的`KeyboardEvent`）捕獲鍵盤彈出和關(guān)閉的動(dòng)作。

2. **計(jì)算輸入框位置**

獲取鍵盤高度，根據(jù)屏幕高度和輸入框初始位置動(dòng)態(tài)計(jì)算輸入框應(yīng)吸附在鍵盤上方的位置。

3. **輸入框動(dòng)畫過(guò)渡**

使用CSS動(dòng)畫或JavaScript動(dòng)畫庫(kù)（如Animate.css、Velocity.js等）實(shí)現(xiàn)輸入框平滑移動(dòng)，確保視覺效果自然流暢。

**二、前端技術(shù)實(shí)現(xiàn)**

**HTML結(jié)構(gòu)**

```html

<div id="inputWrapper">

<input id="textInput" type="text" placeholder="請(qǐng)輸入內(nèi)容...">

</div>

```

**CSS樣式**

```css

#inputWrapper {

position: absolute;

bottom: initial; /* 初始狀態(tài)下貼底放置 */

transition: all 0.3s ease-out; /* 添加平滑過(guò)渡效果 */

}

/* 鍵盤彈出時(shí)的樣式 */

@media only screen and (max-height: calc(100% - 200px)) { /* 假設(shè)鍵盤高度為200px */

#inputWrapper {

bottom: 0; /* 鍵盤彈出時(shí)吸附在鍵盤上方 */

}

}

```

**JavaScript監(jiān)聽與處理**

```javascript

document.addEventListener('DOMContentLoaded', function() {

// 初始化輸入框位置

const inputWrapper=document.getElementById('inputWrapper');

const initialBottom=inputWrapper.getBoundingClientRect().bottom;

// 監(jiān)聽窗口大小改變（用于捕獲鍵盤彈出與關(guān)閉事件）

window.addEventListener('resize', function() {

const windowHeight=window.innerHeight;

const keyboardHeight=windowHeight - initialBottom;

// 鍵盤彈出時(shí)調(diào)整輸入框位置

if (keyboardHeight > 0) {

inputWrapper.style.bottom=`${keyboardHeight}px`;

} else {

// 鍵盤關(guān)閉時(shí)恢復(fù)初始位置

inputWrapper.style.bottom='initial';

}

});

});

```

**注：** 上述代碼僅為演示原理，實(shí)際應(yīng)用中需結(jié)合具體環(huán)境和兼容性問(wèn)題進(jìn)行優(yōu)化。比如，iOS和Android原生鍵盤事件監(jiān)聽方式有所不同，需要適配不同的設(shè)備和系統(tǒng)。

**三、更優(yōu)解決方案：第三方庫(kù)**

為簡(jiǎn)化開發(fā)流程，可以使用像Ionic Framework、React Native等框架提供的內(nèi)置鍵盤事件處理機(jī)制，或是諸如cordova-plugin-keyboard等專門處理鍵盤事件的插件。例如，在React Native中可以使用`Keyboard`組件：

```javascript

import { Keyboard, TextInput } from 'react-native';

<TextInput

ref={(ref)=> { this.inputRef=ref; }}

onSubmitEditing={()=> Keyboard.dismiss()} // 鍵盤輸入完成后關(guān)閉鍵盤

/>

// 監(jiān)聽鍵盤彈出與關(guān)閉事件

Keyboard.addListener('keyboardWillShow', (e)=> {

this.inputRef.measure((ox, oy, width, height, px, py)=> {

const newBottom=py + height + e.endCoordinates.height;

this.setState({ inputWrapperBottom: newBottom });

});

});

Keyboard.addListener('keyboardWillHide', ()=> {

this.setState({ inputWrapperBottom: null });

});

// 在render方法中設(shè)置動(dòng)態(tài)樣式

<inputWrapper style={{ bottom: this.state.inputWrapperBottom }} />

```

**結(jié)語(yǔ)**

實(shí)現(xiàn)吸附在鍵盤上的輸入框，既是一種解決特定場(chǎng)景下用戶體驗(yàn)問(wèn)題的技術(shù)手段，也是檢驗(yàn)前端開發(fā)者對(duì)DOM操作、事件監(jiān)聽、動(dòng)畫效果和兼容性處理等基礎(chǔ)知識(shí)的實(shí)用題目。通過(guò)本文的學(xué)習(xí)和實(shí)踐，相信你已經(jīng)掌握了這一富交互設(shè)計(jì)的秘訣，并能在今后的項(xiàng)目開發(fā)中靈活運(yùn)用，為用戶帶來(lái)更佳的輸入體驗(yàn)。

早上在去公司的班車上打開手機(jī)撥號(hào)界面，突然想怎么能用Axure把它做出來(lái)，到了公司花了半小時(shí)就做出來(lái)，然后把制作過(guò)程分享給大家。

效果描述

手機(jī)撥號(hào)，想必大家都知道，就是點(diǎn)擊數(shù)字時(shí)有按下反饋，且會(huì)組成一串手機(jī)號(hào)碼，同時(shí)按錯(cuò)數(shù)字，會(huì)有撤退按鈕刪除剛輸入的數(shù)字，效果鏈接：http://flpa2p.axshare.com

一、首先畫頁(yè)面原型

主要元件為無(wú)邊框文本框“顯示”（設(shè)置輸入文字為居中），數(shù)字按鍵“1”、“2”….（設(shè)置白色圓形背景），撤銷按鈕“撤銷”。

二、添加交互事件

1、為數(shù)字按鍵添加鼠標(biāo)按下狀態(tài)

• 全部選中數(shù)字按鍵，在右側(cè)統(tǒng)一設(shè)置交互樣式為“鼠標(biāo)按下時(shí)，填充顏色為綠色、字體顏色為白色”，即鼠標(biāo)點(diǎn)擊時(shí)顯示綠色背景+白色文字，松開恢復(fù)默認(rèn)狀態(tài)。

2、為數(shù)字按鍵添加“鼠標(biāo)單擊該數(shù)字按鍵時(shí)，在顯示框依次顯示單擊的數(shù)字”，即執(zhí)行“單擊數(shù)字按鍵設(shè)置顯示框文本為…”命令。

• 選中數(shù)字按鍵“1”，設(shè)置鼠標(biāo)單擊時(shí)，設(shè)置文本-選擇“顯示”文本框；
• 點(diǎn)擊fx，設(shè)置文本框顯示文本，因?yàn)槲谋究蚶锏闹凳亲兓模覀冊(cè)O(shè)置局部變量LAVR1=元件文字=“顯示”，然后設(shè)置fx=[[LVAR1]]1，即上一個(gè)變量值后面再顯示剛剛單擊的數(shù)字1，注意不是[[LVAR1]]+1，那就變成加法了；
• 為其他數(shù)字按鍵也添加這個(gè)命令，設(shè)置fx=[[LVAR1]]2、[[LVAR1]]3…，這樣就完成了“鼠標(biāo)單擊數(shù)字按鍵時(shí)，在文本框依次顯示單擊的數(shù)字”。

3、設(shè)置點(diǎn)擊“撤銷”按鈕，文本框“顯示”會(huì)相應(yīng)刪除一個(gè)數(shù)字。也是執(zhí)行“單擊撤銷按鍵設(shè)置顯示框文本為…”命令。

• 選中“撤銷”按鈕，設(shè)置鼠標(biāo)單擊時(shí)，設(shè)置文本-選擇“顯示”文本框。
• 點(diǎn)擊fx，設(shè)置文本框顯示文本，設(shè)置局部變量LAVR1=元件文字=“顯示”，設(shè)置fx=[[LVAR1]]？？，該怎么設(shè)置呢？這時(shí)我們用到一個(gè)函數(shù)“substring(from，to)”，即從截取變量的第from位到to位字符串，舉例LVAR=123456，那截取第1位到第4位字符串LVAR.substring(1，4)=234（從第1位，不包括第1位的數(shù)字，到第4位包括第4位的數(shù)字，所以為234，而不是1234）。
• 點(diǎn)擊“撤銷”按鍵，文本框應(yīng)該截取0位到倒數(shù)第2位的字符串，那倒數(shù)第2位該怎么表示，這時(shí)又用到一個(gè)函數(shù)LVAR.length，即變量值字符串長(zhǎng)度，這里可以理解為字符串?dāng)?shù)字個(gè)數(shù)，那倒數(shù)第2位就表示為L(zhǎng)VAR.length-1。所以fx=[[LVAR1.substring(0,LVAR1.length-1)]]，設(shè)置好并確認(rèn)，就達(dá)到了“點(diǎn)擊撤銷按鈕，文本框會(huì)相應(yīng)刪除一個(gè)數(shù)字”的效果。

按下“F5”生成Html預(yù)覽一下吧！

今天主要通過(guò)局部變量和兩個(gè)函數(shù)LVAR.substring(from，to)、LVAR.length來(lái)做手機(jī)撥號(hào)，希望大家能通過(guò)練習(xí)掌握，有什么問(wèn)題大家可以一起交流學(xué)習(xí)呀。

本文由 @ 一位焦戶 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。