vue实现虚拟键盘

本文介绍一体机常用的虚拟键盘实现,主打一个免费文章。喜欢就点个赞支持一下吧

simple-keyboard官网:simple-keyboard - simple-keyboard - Francisco HodgeSimple-keyboard is a virtual keyboard for Javascript. You can use it as an input for devices lacking a physical keyboard, such as kiosks, gamepad-cont...icon-default.png?t=N7T8https://hodgef.com/simple-keyboard/

我的效果图

 首先感谢大佬好心人分享参照链接:vue+simple-keyboard 虚拟键盘有中文(拼音),获取焦点调出键盘半封组件_vue中使用simple-keyboardde手机键盘-CSDN博客文章浏览阅读410次,点赞9次,收藏11次。vue虚拟键盘 中文切换 自动调出_vue中使用simple-keyboardde手机键盘https://blog.csdn.net/weixin_43030842/article/details/135699327

 原创目标链接 Vue使用虚拟键盘及中英文切换功能_vue.js_脚本之家这篇文章主要给大家介绍了关于Vue使用虚拟键盘及中英文切换的相关资料,有时候在大型触屏设备(如双屏设备)中往往就没有键盘去操作,所以就需要去建立一个虚拟键盘去操作,需要的朋友可以参考下icon-default.png?t=N7T8https://www.jb51.net/javascript/2907174rg.htm

1.安装所需依赖:

npm install simple-keyboard --save 
npm install simple-keyboard-layouts --save //中文字库
2.实现键盘组件:SimpleKeyboard.vue

<template><div :class="keyboardClass"></div>
</template>
<script>
import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'
//引入中文输入法
import layout from 'simple-keyboard-layouts/build/layouts/chinese' 
export default {name: 'SimpleKeyboard',props: {keyboardClass: {default: 'simple-keyboard',type: String,},maxLength: { default: '' },},data: () => ({keyboard: null,displayDefault: {'{bksp}': 'backspace','{lock}': '切换','{enter}': 'Enter','{tab}': 'Tab','{shift}': 'Shift','{change}': '中文','{space}': ' ','{clear}': '清空','{close}': '关闭'}}),mounted() {this.keyboard = new Keyboard(this.keyboardClass, {onChange: this.onChange,onKeyPress: this.onKeyPress,layoutCandidates: layout.layoutCandidates,layout: {// 默认布局default: ['` 1 2 3 4 5 6 7 8 9 0 - = {bksp}','{tab} q w e r t y u i o p [ ] \\',"{lock} a s d f g h j k l ; ' {enter}",'{shift} z x c v b n m , . / {clear}','{change} {space} {close}',],// shift布局shift: ['~ ! @ # $ % ^ & * ( ) _ + {bksp}','{tab} Q W E R T Y U I O P { } |','{lock} A S D F G H J K L : " {enter}','{shift} Z X C V B N M < > ? {clear}','{change} {space} {close}',],},// 按钮展示文字display: this.displayDefault,// 按钮样式buttonTheme: [{class: 'hg-red close',buttons: '{close}',},{class: 'change',buttons: '{change}',},],// 输入限制长度maxLength: this.maxLength,})},methods: {onChange(input) {this.$emit('onChange', input) // 输入值向外传递},// 重写清空按钮onChangeKey() {this.keyboard.setInput('')this.$emit('empty')},// @focus 触发时赋值 封装组件调用onChangeFocus(value) {this.keyboard.setInput(value)},// 点击键盘onKeyPress(button, $event) {// 点击关闭if (button === '{close}') {// 子组件调用父组件的关闭按钮方法this.$parent.closekeyboard()return false}else if (button === '{change}') {// 切换中英文输入法if (this.keyboard.options.layoutCandidates !== null) {this.$set(this.displayDefault, '{change}', '英文')// 切换至英文this.keyboard.setOptions({layoutCandidates: null,display: this.displayDefault,})} else {// 切换至中文this.$set(this.displayDefault, '{change}', '中文')this.keyboard.setOptions({layoutCandidates: layout.layoutCandidates,display: this.displayDefault,})}}else if (button === '{clear}') {this.onChangeKey()}else {let value =$event.target.offsetParent.parentElement.children[0].children[0].value// 输入框有默认值时,覆写if (value) {this.keyboard.setInput(value)}this.$emit('onKeyPress', button)}if (button === '{shift}' || button === '{lock}') this.handleShift()},// 切换shift/默认布局handleShift() {let currentLayout = this.keyboard.options.layoutNamelet shiftToggle = currentLayout === 'default' ? 'shift' : 'default'this.keyboard.setOptions({layoutName: shiftToggle,})},},
}
</script>
<style lang="less">
//这块样式可以根据自己的需求调整
@deep: ~'>>>';
.hg-candidate-box {position: fixed;width: 100%;font-size: 42px;z-index: 9999;.hg-candidate-box-list {.hg-candidate-box-list-item {padding: 0 20px;}}
}
.hg-rows {width: 100% !important;.hg-row {height: 60px;padding: 10px;.hg-button {height: 60px;font-size: 30px;}}
}
.hg-candidate-box {max-width: 5rem;left: 10px;
}
li.hg-candidate-box-list-item {width: 80px;height: 55px;
}
.hg-theme-default {width: 100%;height: 340px;left: 0;position: fixed;bottom: 0px;background-color: rgb(215, 214, 214); //间隙背景颜色.hg-button {&.hg-red {background: #db3e5d !important;color: white;&.close {max-width: 360px;}}&.change {max-width: 360px;}}
}
.hg-button {background-color: rgb(19, 19, 19) !important;color: antiquewhite;
}
.hg-button-shift {width: 180px;
}
.hg-button-clear {width: 180px;
}
.hg-button-enter {width: 150px;
}
.hg-button-lock {width: 150px;
}
</style>./SimpleKeyboard.vue

3.对键盘组件二次封装 

<template><div><div v-show="showKeyboard"><SimpleKeyboard ref="refSimpleKeyboard" class="Keyboard" @onChange="onChangeKeyboard" @empty="empty" /></div></div>
</template><script>
import SimpleKeyboard from './SimpleKeyboard'
export default {name: 'Keyboard',components: {SimpleKeyboard},data() {return {showKeyboard: false, // 键盘默认隐藏value: '',key: ''}},watch: {key(val) {this.key = valif (this.showKeyboard) {this.showKeyboard = falsesetTimeout(() => {this.showKeyboard = true}, 100)}},},methods: {// inpuit获取焦点显示虚拟键盘onInputFocus(res) {this.showKeyboard = true},// 给输入框赋值onChangeKeyboard(input) {this.$emit('input', { value: input, key: this.key });},// 隐藏键盘 父组件调用closeInputFocus() {this.showKeyboard = false},// 隐藏键盘 子组件调用closekeyboard() {this.showKeyboard = false},// 清空输入框empty() {this.$emit('input', { value: '', key: this.key });},// 给虚拟键盘赋当前输入框的值setKeyboardInput(input) {this.$refs.refSimpleKeyboard.onChangeFocus(input)}}
}
</script><style lang="less" scoped>
// 键盘样式
.Keyboard {position: absolute;
}
</style>

3.引用 

<template><div>
/*在需要显示虚拟键盘的地方增加获取焦点事件@focus=’onInputFocus(‘form.data’,form.data)‘参数说明:onInputFocus(‘form.data’,form.data)
参数说明:第一个参数为当前输入框的双向绑定数据名字(字符串),第二个参数为当前输入框的双向绑定数据*/<YsInput v-model="form.data" clearable placeholder="请输入关键字" @on-focus="onInputFocus('form.data', form.data)"@on-blur="outInputFocus" ref="searchInput" style="margin-right:16px;width: 410px;height: 48px;"></YsInput>
/*虚拟键盘半封装说明
需要在父组件中引入引入该组件 使用时需添加ref 以及@input="updateInputValue"回调函数。 input 为虚拟键盘回传值函数 为对象结构{value: '', key: ‘**’} value为键盘回传的值 key对应变量名字*/<KeysInput ref="keysInput" @input="updateInputValue"></KeysInput></div>
</template><script>
import KeysInput from './Keyboard.vue' //引入的虚拟键盘
export default {name: '**',components: { KeysInput },data() {return {form: {data: ''}}},methods: {// 当前input获取焦点时,显示键盘onInputFocus(event, value) {this.$refs.keysInput.showKeyboard = true// 传入绑定值(字符串)this.$refs.keysInput.key = event//传入当前值this.$refs.keysInput.setKeyboardInput(value)},// 当前input失去焦点时,隐藏键盘// outInputFocus() {//     if (this.$refs.keysInput) {//         this.$refs.keysInput.closeInputFocus();//     }// },// 回显在input框的值updateInputValue(value) {console.log(value)//根据key 回写input值let parameter = value.key.split(".") //把变量名字进行分割以免对象层级问题出现数据回传出现问题if (parameter.length == 1) {this.[value.key] = value.value} else {                               //参数长度为1 说明是普通变量 直接赋值let par0 = parameter[0]let par1 = parameter[1]this.[par0].[par1] = value.value    //赋值如果有更多层级则按需编写}},}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/726211.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

请你简单说一下 Mysql 的事务隔离级别

什么情况&#xff0c;写了 5 年的 CRUD&#xff0c;还搞不清楚 Mysql 的事务隔离级别&#xff0c;难怪第一面就被刷下来。 一个 5 年经验的粉丝&#xff0c;在一个公司干了 5 年&#xff0c;觉得自己特厉害&#xff0c;什么都能搞定&#xff0c;结果每次一到技术面就被刷。问我…

算法训练营day42(补),动态规划10

func max(a, b int) int { if a > b { return a } return b } //121. 买卖股票的最佳时机 func maxProfit1(prices []int) int { n : len(prices) dp : make([][]int, n) for i : 0; i < n; i { dp[i] make([]int, 2) } dp[0][0] -prices[0] dp[0][1] 0 for i : 1;…

使用php编写代码实现伪协议包含和日志文件包含

伪协议包含是指利用php的include函数或者require函数来加载远程资源或者本地文件&#xff0c;通过伪协议的形式来指定文件路径。日志文件包含是指通过修改php的日志文件路径来实现包含恶意代码。 下面是一个使用php实现伪协议包含和日志文件包含的简单示例&#xff1a; 伪协议…

【项目】图书管理系统

目录 前言&#xff1a; 项目要求&#xff1a; 知识储备&#xff1a; 代码实现&#xff1a; Main&#xff1a; Books包&#xff1a; Book&#xff1a; BookList&#xff1a; Operate包&#xff1a; Operate: addOperate: deleteOperate: exitOperate: findOperate:…

Redis(十七)分布式锁

文章目录 面试题分布式锁锁的种类分布式锁需要具备的条件和刚需分布式锁 案例nginx分布式微服务部署&#xff0c;单机锁问题分布式锁注意事项lock/unlocklua脚本自研版的redis分布式锁搞定lua脚本 可重入锁可重入锁种类可重入锁hset实现&#xff0c;对比setnx&#xff08;重要&…

16-Java命令模式 ( Command Pattern )

Java命令模式 摘要实现范例 命令模式&#xff08;Command Pattern&#xff09;中请求以命令的形式包裹在对象中&#xff0c;并传给调用对象 调用对象寻找可以处理该命令的合适的对象&#xff0c;并把该命令传给相应的对象&#xff0c;该对象执行命令 命令模式是行为型模式&…

Clion调试QT程序qDebug()、cout控制台无输出的可能解决方法

qDebug()不输出 在当前项目配置中添加一个环境变量 方法一、单独为配置 QT_ASSUME_STDERR_HAS_CONSOLE1 方法二、全局配置&#xff08;系统变量&#xff09; 一劳永逸 效果 cout不输出 Clion在debug调试C/C的时候&#xff0c;printf/cout不会实时输出情况 结果同上~ 谢阅…

SDM450核心板_高通SDM450安卓核心板模块性能参数

高通SDM450核心板是基于SDM450移动平台开发的一款高性能核心板。采用领先的14纳米技术&#xff0c;该核心板为高端智能设备提供了卓越的性能和优质的体验。板载2GB16GB的内存(可选配4GB32GB)&#xff0c;双 ISP(图像传感器处理器)支持丰富的照片细节和双摄像头体验&#xff0c;…

30天自制操作系统(第28天)

28.1 alloca __alloca 会在下述情况下被 C 语言的程序调用&#xff08;采用 near-CALL 的方式&#xff09;。 1、要执行的操作从栈中分配 EAX 个字节的内存空间&#xff08; ESP - EAX; &#xff09; 2、要遵守的规则不能改变 ECX 、 EDX 、 EBX 、 EBP 、 ESI 、 EDI的值&am…

借助 Terraform 功能协调部署 CI/CD 流水线-Part 1

在当今快节奏的开发环境中&#xff0c;实现无缝、稳健的 CI/CD 流水线对于交付高质量软件至关重要。在本文中&#xff0c;我们将向您介绍使用 Bitbucket Pipeline、ArgoCD GitOps 和 AWS EKS 设置部署的步骤&#xff0c;所有步骤都将利用 Terraform 的强大功能进行编排。在Part…

01_Maven

文章目录 Maven安装MavenMaven的工作流程配置MavenMaven的使用module和project的关系如何用Maven导包 如何用Maven进行项目构建指令介绍clean指令compile指令package指令install指令 Maven的依赖管理如何导包scope作用域依赖传递依赖冲突 使用Maven开发项目Junit如何使用Junit …

Unity类银河恶魔城学习记录8-3 P79 Blackhole details setup源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Blackhole_Skill_Controller.cs using System.Collections; using System.C…

QT学习笔记3--创建对话框

1. 对话框子类 finddialog.h #ifndef FINDDIALOG_H #define FINDDIALOG_H#include <QLabel> #include <QDialog> #include <QCheckBox> #include <QLineEdit> #include <QPushButton>#include <QHBoxLayout> #include <QVBoxLayout&g…

UnityAPI的学习——Quaternion类

Quaternion又称为四元数&#xff0c;由x、y、z和w这4个分量组成&#xff0c;属于struct类型。 在Unity中&#xff0c;用Quaternion来存储和表示对象的旋转角度。 Quaternion类实例属性 在Quaternion类中&#xff0c;涉及的实例属性主要有eulerAngles eulerAngles属性&#x…

力扣刷题Day11--21. 合并两个有序链表(js)

目录 1&#xff0c;题目 2&#xff0c;代码 2.1迭代思想 2.2递归思想 3&#xff0c;学习与总结 3.1js中的链表类 3.2递归思想 3.3提醒自己 1&#xff0c;题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 2&am…

YOLOv9独家原创改进|加入RT-DETR中的HGBlock!

专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;主力高效涨点&#xff01;&#xff01;&#xff01; 一、改进点介绍 HGBlock是RT-DETR中使用的特征提取模块。 二、HGBlock模块详解 2.1 模块简介 HGBlock的主要思想&#xff1a; 一个并联的卷积模块与…

java上传本地文件到服务器共享

在Windows系统中,将本地文件夹中的某个文件上传到另一台Windows服务器电脑上,前提:两台电脑网络互通,要接收文件的Windows服务器文件夹开启了共享,可以被本机用如下方式进行写入和读取: 如何配置服务器共享请自行百度查找。 所需要的maven依赖如下: <dependency>…

AI辅助研发的崭新前景:技术进展、应用案例与挑战机遇

目录 前言1. 技术进展&#xff1a;深度学习、强化学习与生成模型的崭新应用1.1 深度学习的崭新应用1.2 强化学习的优化应用1.3 生成模型在创意设计中的应用 2. 行业应用案例&#xff1a;医药、汽车、电子等领域的AI助力2.1 医药领域的AI辅助研发2.2 汽车设计中的AI助力2.3 电子…

Qwen-Agent自定义Tool

qwen-agent项目部署 1、下载qwen-agent https://github.com/QwenLM/Qwen-Agent2、安装依赖环境 pip3 install -r requirements.txt自定义Tool cd qwen_agent/tools参考其他的工具&#xff0c;我这里创建了一个查询手机号归属地的工具get_mobile_address.py&#xff1a; im…

猜猜:哪句古诗与古代女子妆容有关?2024.3.8蚂蚁庄园今日答案:金盆水里拨红泥

蚂蚁庄园是一款爱心公益游戏&#xff0c;用户可以通过喂养小鸡&#xff0c;产生鸡蛋&#xff0c;并通过捐赠鸡蛋参与公益项目。用户每日完成答题就可以领取鸡饲料&#xff0c;使用鸡饲料喂鸡之后&#xff0c;会可以获得鸡蛋&#xff0c;可以通过鸡蛋来进行爱心捐赠。其中&#…