天给小伙伴们推荐一款超酷的 Vue 模拟键盘组件VueSimpleKeyboard。

vue-simple-keyboard 一个可定制 自适应 轻量级的虚拟键盘vue.js组件。支持自定义主题，手机端和IOS风格、数字键盘等功能。

特性

• 支持vue不需要额外的插件
• 可定制性选项和方法
• 自适应布局
• 支持自动更正，输入掩码等功能
• 支持多键盘实例
• 提供丰富的演示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>

提供丰富的演示实例及API文档

附上文档及仓库地址

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

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

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

好了，就分享到这里。感谢大家的阅读。如果有什么好的想法欢迎留言讨论哈！

面试官：实现一个吸附在键盘上的输入框 —— 解密移动端富交互设计的实战秘籍

**引言**

在移动应用开发中，为提升用户体验，经常会遇到一种特殊的交互需求：实现一个跟随键盘弹出和收缩的输入框，让用户在聊天、评论等场景下无需频繁滚动界面即可直接输入。本文将深入剖析这种“吸附在键盘上的输入框”的实现原理与实战代码，帮助你从容应对面试官的此类提问，同时也能让你在实际项目中得心应手地应用这一技术。

**一、问题分析与设计思路**

1. **监听键盘弹出与关闭事件**

移动端可通过监听`resize`事件或原生API（如iOS的`KeyboardEvent`）捕获键盘弹出和关闭的动作。

2. **计算输入框位置**

获取键盘高度，根据屏幕高度和输入框初始位置动态计算输入框应吸附在键盘上方的位置。

3. **输入框动画过渡**

使用CSS动画或JavaScript动画库（如Animate.css、Velocity.js等）实现输入框平滑移动，确保视觉效果自然流畅。

**二、前端技术实现**

**HTML结构**

```html

<div id="inputWrapper">

<input id="textInput" type="text" placeholder="请输入内容...">

</div>

```

**CSS样式**

```css

#inputWrapper {

position: absolute;

bottom: initial; /* 初始状态下贴底放置 */

transition: all 0.3s ease-out; /* 添加平滑过渡效果 */

}

/* 键盘弹出时的样式 */

@media only screen and (max-height: calc(100% - 200px)) { /* 假设键盘高度为200px */

#inputWrapper {

bottom: 0; /* 键盘弹出时吸附在键盘上方 */

}

}

```

**JavaScript监听与处理**

```javascript

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

// 初始化输入框位置

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

const initialBottom=inputWrapper.getBoundingClientRect().bottom;

// 监听窗口大小改变（用于捕获键盘弹出与关闭事件）

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

const windowHeight=window.innerHeight;

const keyboardHeight=windowHeight - initialBottom;

// 键盘弹出时调整输入框位置

if (keyboardHeight > 0) {

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

} else {

// 键盘关闭时恢复初始位置

inputWrapper.style.bottom='initial';

}

});

});

```

**注：** 上述代码仅为演示原理，实际应用中需结合具体环境和兼容性问题进行优化。比如，iOS和Android原生键盘事件监听方式有所不同，需要适配不同的设备和系统。

**三、更优解决方案：第三方库**

为简化开发流程，可以使用像Ionic Framework、React Native等框架提供的内置键盘事件处理机制，或是诸如cordova-plugin-keyboard等专门处理键盘事件的插件。例如，在React Native中可以使用`Keyboard`组件：

```javascript

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

<TextInput

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

onSubmitEditing={()=> Keyboard.dismiss()} // 键盘输入完成后关闭键盘

/>

// 监听键盘弹出与关闭事件

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方法中设置动态样式

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

```

**结语**

实现吸附在键盘上的输入框，既是一种解决特定场景下用户体验问题的技术手段，也是检验前端开发者对DOM操作、事件监听、动画效果和兼容性处理等基础知识的实用题目。通过本文的学习和实践，相信你已经掌握了这一富交互设计的秘诀，并能在今后的项目开发中灵活运用，为用户带来更佳的输入体验。

早上在去公司的班车上打开手机拨号界面，突然想怎么能用Axure把它做出来，到了公司花了半小时就做出来，然后把制作过程分享给大家。

效果描述

手机拨号，想必大家都知道，就是点击数字时有按下反馈，且会组成一串手机号码，同时按错数字，会有撤退按钮删除刚输入的数字，效果链接：http://flpa2p.axshare.com

一、首先画页面原型

主要元件为无边框文本框“显示”（设置输入文字为居中），数字按键“1”、“2”….（设置白色圆形背景），撤销按钮“撤销”。

二、添加交互事件

1、为数字按键添加鼠标按下状态

• 全部选中数字按键，在右侧统一设置交互样式为“鼠标按下时，填充颜色为绿色、字体颜色为白色”，即鼠标点击时显示绿色背景+白色文字，松开恢复默认状态。

2、为数字按键添加“鼠标单击该数字按键时，在显示框依次显示单击的数字”，即执行“单击数字按键设置显示框文本为…”命令。

• 选中数字按键“1”，设置鼠标单击时，设置文本-选择“显示”文本框；
• 点击fx，设置文本框显示文本，因为文本框里的值是变化的，我们设置局部变量LAVR1=元件文字=“显示”，然后设置fx=[[LVAR1]]1，即上一个变量值后面再显示刚刚单击的数字1，注意不是[[LVAR1]]+1，那就变成加法了；
• 为其他数字按键也添加这个命令，设置fx=[[LVAR1]]2、[[LVAR1]]3…，这样就完成了“鼠标单击数字按键时，在文本框依次显示单击的数字”。

3、设置点击“撤销”按钮，文本框“显示”会相应删除一个数字。也是执行“单击撤销按键设置显示框文本为…”命令。

• 选中“撤销”按钮，设置鼠标单击时，设置文本-选择“显示”文本框。
• 点击fx，设置文本框显示文本，设置局部变量LAVR1=元件文字=“显示”，设置fx=[[LVAR1]]？？，该怎么设置呢？这时我们用到一个函数“substring(from，to)”，即从截取变量的第from位到to位字符串，举例LVAR=123456，那截取第1位到第4位字符串LVAR.substring(1，4)=234（从第1位，不包括第1位的数字，到第4位包括第4位的数字，所以为234，而不是1234）。
• 点击“撤销”按键，文本框应该截取0位到倒数第2位的字符串，那倒数第2位该怎么表示，这时又用到一个函数LVAR.length，即变量值字符串长度，这里可以理解为字符串数字个数，那倒数第2位就表示为LVAR.length-1。所以fx=[[LVAR1.substring(0,LVAR1.length-1)]]，设置好并确认，就达到了“点击撤销按钮，文本框会相应删除一个数字”的效果。

按下“F5”生成Html预览一下吧！

今天主要通过局部变量和两个函数LVAR.substring(from，to)、LVAR.length来做手机拨号，希望大家能通过练习掌握，有什么问题大家可以一起交流学习呀。

本文由 @ 一位焦户 原创发布于人人都是产品经理。未经许可，禁止转载。