撸了个 Vue.js 的虚拟键盘组件

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3030 天前的主题，其中的信息可能已经有所发展或是发生改变。

在线 Demo

截图：

GitHub: https://github.com/CodeDaraW/vue-virtual-keyboard 求 Star ～

26 条回复 • 2018-03-12 20:57:00 +08:00

kokdemo

2016-08-09 10:26:44 +08:00

你这个没有做移动的适配啥的？

whahuzhihao

2016-08-09 10:34:01 +08:00

shift 和 capslock 功能重复了吧建议 shift 做成一次性的换挡

DaraW

2016-08-09 10:34:36 +08:00

@kokdemo 没有，写的时候感觉没有必要，如果这样的需求比较多可以考虑下面的版本加上去

moosoome

2016-08-09 10:35:37 +08:00

@kokdemo 不过移动端真的需要虚拟键盘吗本来就是虚拟键盘啊

DaraW

2016-08-09 10:36:23 +08:00

@whahuzhihao Shift 的功能包含了 Caps 的功能，谢谢建议，我也想过这样，（拖延症不发作的话）我改一下

2016-08-09 10:45:23 +08:00

@moosoome 需要，比如输密码等场景，自己的键盘比其他厂商的输入法键盘更加安全。

kokdemo

2016-08-09 10:45:58 +08:00

@DaraW
@moosoome pc 端用到虚拟键盘的情况更少啊……

ctsed

2016-08-09 10:48:00 +08:00

r#6 @NK html 键盘更加不安全

ctsed

2016-08-09 10:49:28 +08:00

有个 bug 哈光标点到文字中间，按退格键还是删的最后一个字符

DaraW

2016-08-09 11:41:11 +08:00

@ctsed 点击下面的键盘后上面的输入框会失焦，没有了光标，所以没什么好的思路解决这个问题

DaraW

2016-08-09 11:41:49 +08:00

@ctsed 大概是没有绝对的安全

hronro

2016-08-09 11:43:41 +08:00

点击光标到文字中间，再点击键盘，会多出来一堆空格

DaraW

2016-08-09 11:43:42 +08:00

@kokdemo pc 端可以根据这个稍微修改下实现一些特殊的需求，比如之前有个是要实现西语的键盘，只要根据这种稍微修改下就行了（没有留接口，感觉留了太乱），还有就是输入密码的场景

DaraW

2016-08-09 11:45:26 +08:00

@hronro 咦，（我这边是正常的系列）请问你是怎么做的，我复现试试

ctsed

2016-08-09 11:56:27 +08:00

r#10 @DaraW http://js8.in/2010/01/29/javascript%E8%8E%B7%E5%8F%96%E5%85%89%E6%A0%87%E4%BD%8D%E7%BD%AE%E4%BB%A5%E5%8F%8A%E8%AE%BE%E7%BD%AE%E5%85%89%E6%A0%87%E4%BD%8D%E7%BD%AE/

DaraW

2016-08-09 12:30:24 +08:00

@ctsed get, Thx~

anyforever

2016-08-09 13:30:57 +08:00

不能连续撤销，撤一个之后，光标自动跑后面去，再撤销就从后面开始撤了

anyforever

2016-08-09 13:31:56 +08:00

大写打开之后，如果后面也开启着大写状态比较好。

spring5413

2016-08-09 18:04:02 +08:00

顶下，有时间膜拜下

DaraW

2016-08-09 18:28:31 +08:00

@anyforever 是直接从后面开始删的

DaraW

2016-08-09 18:30:40 +08:00

@spring5413 是国美的大牛啊，说膜拜太谦虚了==

nxtxiaolong

2016-08-09 19:28:18 +08:00

光标好吧

hanxiV2EX

2016-08-12 12:23:02 +08:00

可以考虑先支持移动平台，然后再嵌入拼音输入法。完美。

DaraW

2016-08-12 12:50:16 +08:00

@hanxiV2EX hhhhhh

qq276711392

2018-03-12 18:02:11 +08:00

可否跟 input 标签绑定，得到光标焦点就弹出来键盘，失去焦点就隐藏键盘，在收银系统上很需要这种场景的

DaraW

2018-03-12 20:57:00 +08:00 via iPhone

@qq276711392 直接给组件的 v-show 和 input 的 focus/blur 事件绑定就可以了