65.9K
CodeProject 正在变化。 阅读更多。
Home

JavaScript 虚拟键盘

WingedFox
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.95/5 (29投票s)

2007年1月12日

LGPL3

10分钟阅读

viewsIcon

28238278

downloadIcon

8616

支持输入翻译的真正多语言虚拟键盘。

各软件包之间的区别
满
包含开发版本。包括布局源文件和设置实用程序。
压缩版
与完整版本具有相同的功能，但所有脚本都已使用 Tricky Scripter 打包和混淆。
Lite
已打包所有脚本，与压缩版包相同，并且不包含设置实用程序和布局源文件。
TinyMCE, TinyMCE 3, Xinha
对应 WISIWYG 编辑器的插件，从压缩版包构建。

VirtualKeyboard screenshot

引言

虚拟键盘是一个很棒的工具，当您无法安装或使用操作系统附带的额外键盘布局时。例如，您可能在网吧，那里只有一个 En/US 布局，而您想写信给您的俄罗斯、韩国或日本朋友。是的，您可以直接音译您的文字，但这将花费比您预期的时间多得多，而且会让阅读变得枯燥。

如果是这种情况，请打开 VirtualKeyboard 网站并开始输入。它将使文本输入像使用本地键盘布局一样舒适。

您可能想将这样的键盘集成到您自己的应用程序中，例如您的搜索引擎、论坛、Webmail 系统或其他任何东西。这是一个明智的决定——一个小型应用程序将使您和您的客户的生活更轻松。

虚拟键盘功能

  • 完全的键盘和鼠标输入——您可以同时使用它们，按键盘上的按键并按下 Alt 键，然后单击虚拟按钮上的鼠标
  • 支持 MS Keyboard Layout Creator，可轻松创建新布局
  • 支持 CSS 皮肤自定义键盘外观
  • 支持从左到右和从右到左的脚本，自动切换到合适的脚本
  • 全功能的键盘输入，支持 AltGr 和 SGCaps 字符集
  • 支持富文本编辑器
  • 支持中文、日文、韩文、Lakhota 以及许多其他 IME
  • 支持的布局列表包含 160 多个布局

使用代码

在页面上包含键盘

  1. 在 head 中添加以下行
    2. <SCRIPT src="vk_loader.js" type="text/javascript"></SCRIPT>
    vk_loader.js 有两个可选参数
    vk_skin
    指向 /css/ 目录中的文件夹，其中包含皮肤定义
    vk_layout
    传递布局名称以在开始时启用，默认是第一个加载的

    示例

    <SCRIPT src="vk_loader.js?vk_layout=AM%20Armenian%20Eastern&vk_skin=soberTouch" 
        type="text/javascript"></SCRIPT>
  2. 在带有文本字段的页面上添加以下行
    3. VirtualKeyboard.toggle('target_input_field_id','keyboard_holder_id');

    也就是说，我在事件处理程序中使用它来在按钮点击时打开键盘

是的，就这样。无需编写任何自定义代码或其他任何内容。该解决方案非常可靠。

使用 IME 输入

让我们使用中文拼音布局输入“你好”——“hello”——中文。假设您已经打开了一个带有键盘的页面，并从键盘下拉列表中选择了拼音布局。
  • 输入任何被识别为开始输入汉字的符号时，您将看到一个包含可用建议的弹出工具。输入 'n'。

    • step 1, pressing 'n'

  • 接下来输入的字符将缩减可用汉字的列表。输入 'i'（ni）。

    • step 2, pressing 'i'

  • 按数字键，您将从 IME 弹出窗口中选择一个可用的汉字。按 'Enter' 或任何不被识别为汉字一部分的键，将插入默认（第一个）汉字，并开始根据最后一个符号匹配汉字。输入 'h'（nih）。

    • step 3, pressing 'h'

  • 输入 'a' 和 'o'（分别为 niha 和 nihao）。

    • step 4, pressing 'a'

    step 5, pressing 'o'

  • 按 '1' 或 'Enter' 完成输入。你好就是 'hello'。

    • step 6, ni hao

其他 IME 也适用，它们可能有或没有工具栏，但它们的工作方式基本相同。

设置布局

大多数情况下，您不需要所有布局，然后您可以制作一个更小的包。

本地设置

  1. 在 IE6 或 IE7 中运行 /setup/in/setup.html 脚本
  2. 选择所需的布局并按“处理选定”按钮
  3. 将布局从 /setup/out/layouts.js 复制到 /layouts/layouts.js

服务器设置（需要 PHP）

  1. 运行 /setup/in/setup.php 脚本
  2. 选择所需的布局，然后勾选“安装”复选框
  3. 勾选“安装”复选框以尝试将布局从 /setup/out/layouts.js 复制到 /layouts/layouts.js
  4. 按“处理选定”按钮

就是这样。如果您没有看到任何错误消息，则表示您已成功创建了一个新的布局包。

开发新布局

开始

任何新布局都应该在一个 .klc 文件中描述，该文件使用 Microsoft Keyboard Layout Creator 工具构建。使用此工具，您将字母和符号分配给键盘按键，然后将其保存到 /setup/in/ 文件夹中的 .klc 文件。完成，您已经为 VirtualKeyboard 创建了一个新布局。如果您打算添加 IME，请参阅下面的部分。如果不是，请参阅上面的“设置布局”部分。

添加 IME

如果您想开发高级键盘布局，您必须编写一些输入处理代码并将其放置在 /setup 文件夹下的正确位置。

设置文件夹结构

/in
用于存放 .klc 源文件
/in/addons
包含与地区代码中的目标国家完全同名的文件（例如，对于 ko-KR，它是 KR）。它保存语言数据，即汉字字母。
/in/addons/callbacks
包含与布局文件名同名的文件（例如，chinese-cangjie.js）并包含以下格式的依赖于布局的 JS 代码
{'activate' : function () {
   // optional method
   // called on the layout activation time
   // here you could set some initial state for the IME and layout
 }
,'charProcessor' : function (chr, buf) {
   // required method
   // called on the each keypress
   // used for input transformation, based on the current char and existing buffer
   // should return ['new string', selection length]
   return [buf+chr, 0]
 }
}
/out
包含已编译的 layouts.js 文件，可与 VirtualKeyboard 一起使用。

许可证

注意：本软件受俄罗斯联邦知识产权、专利和商标局于 2009 年 2 月 20 日颁发的专利号 2009611147 保护。

免费许可证

键盘根据 LGPL/BSD 许可证分发，并附有以下附加限制

  1. 发布的键盘应包含可见的版权信息和指向 官方页面的活动链接。
  2. 自定义键盘设计应保持版权可见且易于访问。

商业许可证

如果您想从键盘 UI 中删除版权信息，最好获得商业许可证。请 联系我，我们将对此进行讨论。

提供的服务

如果您希望在键盘中看到任何内容，我们提供软件/框架集成服务、自定义布局和键盘模块的开发等。请随时 联系我，我将尽力以最佳方式解决您的任务。

致谢

使用 VirtualKeyboard 的网站

竞争对手

CodeProject 已经有一个类似的工具——https://codeproject.org.cn/jscript/jvk.asp，但它在以下方面有所不足

  1. 键盘外观无法轻松自定义
  2. 键盘布局难以创建
  3. 安装复杂

SmartLink 也有 VirtualKeyboard，但也不那么好

  1. 它是商业的
  2. 它有图像格式的键盘布局
  3. 它以一种奇怪的方式处理死键
  4. 它不支持正常的文本编辑工作流程（至少在 FF 中，它只允许追加输入字符）

Gate2Home 是其中比较好的，但也有局限性

  1. 不可移植，无法在本地站点上设置
  2. 页面充斥着广告
  3. 键盘重新加载需要很长时间才能完成（整个页面被重新加载）

历史

  • 2009年3月21日
    • VirtualKeyboard v3.6.1
    • 重写了布局解析器和构建器，增加了对 SGCaps 的支持，并完全支持 AltGr 移位状态
    • 增加了符文和其他一些古代布局
    • 增加了缅甸语、梵语和一系列埃塞俄比亚语布局
    • 在布局中增加了对 4 字节字符的支持
    • 添加了“提示”，用于突出显示在按下控件键时将激活的符号
    • 现在布局与真实键盘布局的兼容性更好，就像它们出现在 MSKLC 沙箱中一样
    • 更新了版权信息，包含专利相关信息
  • 2009年2月14日
    • VirtualKeyboard v3.6.0
    • 增加了皮肤缩略图
    • 增加了对 cookie 的支持，现在布局和映射是状态化的
    • 增加了高棉语和一系列孟加拉语布局
  • 2008年12月5日
    • VirtualKeyboard v3.4.5
    • VirtualKeyboard v3.5.3
    • 增加了 Blackfoot、Cherokee 和 Inuktitut 布局
    • 增加了按布局组名过滤布局的功能
    • 修复了 IE 中的皮肤
    • 修复了转换后布局的排序
    • 增加了“惰性”布局初始化
  • 2008年10月4日
    • VirtualKeyboard v3.4.4
    • VirtualKeyboard v3.5.2
    • 增加了 无图像皮肤
    • 代码重构
  • 2008年9月9日
    • VirtualKeyboard v3.4.3
    • VirtualKeyboard v3.5.1
    • 修复了浏览器窗口检测
    • 修复了选择像素坐标计算
    • 增加了 繁体中文拼音 布局
    • 修复了韩语布局中的“智能退格”功能
    • 更新了 中文仓颉 和 日文 布局
    • 修复了阻止系统热键（例如 Ctrl+c）的问题
    • 修复了从弹出键盘输入的文本
    • 修复了事件处理程序清理的错误
    • 重构了虚拟按钮控制代码
    • 修复了键盘上的“粘滞”键
  • 2008年9月2日
    • VirtualKeyboard v3.4.2
    • 维护版本，包括 3.5.0b1 和 3.5.0b2 版本中的修复
    • 增加了更好的 IME 工具栏
  • 2008年7月22日
    • VirtualKeyboard v3.5.0b2
    • 增加了更好的 IME 工具栏
    • 更新了映射选择器，增加了映射组
    • 修复了 简体中文拼音 中的错误
  • 2008年6月18日
    • VirtualKeyboard v3.5.0b1
    • 增加了 15 个新布局：车臣语（西里尔文/拉丁文）、达里语、丁卡语、库尔德语（阿拉伯文/西里尔文/拉丁文）、普什图语、他加禄语、塔吉克语（拉丁文）、土库曼语（西里尔文）、维吾尔语（阿拉伯文/西里尔文/拉丁文）、乌尔都语（阿拉伯文）
    • 增加了键盘输入翻译映射
      • QWERTY
      标准、加拿大、荷兰、爱沙尼亚、希腊（220）、希腊（319）、古吉拉特语、意大利语、卡纳达语、葡萄牙语、斯堪的纳维亚语、西班牙语、泰米尔语、土耳其语、英国
      QWERTZ
      阿尔巴尼亚语、波斯尼亚语、捷克语、德语、匈牙利语、斯洛伐克语、瑞士
      AZERTY
      比利时、法语
      ,WERTY
      保加利亚语
      QGJRMV
      Latvian
      英国-Dvorak
      FG;IOD
      土耳其 F 键
      ;QBYUR
      美国-Dvorak
      56Q.OR
      美国-Dvorak
    • 修复了 IE 中的 Tab 键
    • 修复了从驱动程序输入死键，在输入字段中输入 2 个字符
  • 2008年5月17日
  • 2008年4月24日
    • VirtualKeyboard v3.4.0
    • 增加了 iFrame 键盘模块，将其与主页面隔离，解决了与 Prototype 和其他框架的冲突
    • 重写了 WISYIWYG 编辑器的插件，允许集成任何键盘模块
  • 2008年3月28日
    • VirtualKeyboard v3.3.4
    • 修复了从另一个窗口/框架进行选择的处理
    • 修复了被移除元素的事件处理程序清理
    • 更新了 URL 参数名称，现在它们是“vk_skin”和“vk_layout”
  • 2008年2月23日
    • VirtualKeyboard v3.3.3
    • 更新了日文 IME 的汉字列表
    • 改进了 Lakhota IME
  • 2008年1月11日
    • VirtualKeyboard v3.3.2
    • 修复了设置脚本，错误地处理了 MSKLC 的 SGCaps 标记
    • 在 layouts.js 中添加了 BOM 标记，提高了浏览器对 UTF-8 的识别能力
  • 2008年1月8日
    • VirtualKeyboard v3.3.1
    • 进行了发布准备
    • 修复了 DocumentSelection 中的错误，导致在空 iframe 输入时出现库错误
  • 2007年12月25日
    • VirtualKeyboard v3.3.0b3
    • 通过延迟布局初始化，显着提高了加载速度
    • 通过使用按语言代码分组的单个下拉框，简化了布局选择
    • 修复了 Safari 中的问题
  • 2007年12月19日
    • VirtualKeyboard v3.3.0b2
    • 修复了 TinyMCE 插件中的问题
    • 为 Xinha 添加了插件
    • 修复了 Internet Explorer 中“Del”键的处理
  • 2007年10月28日
    • VirtualKeyboard v3.3.0b1
    • 增加了 RichEdit 控件支持
    • 创建了 TinyMCE 插件
  • 2007年8月8日
    • VirtualKeyboard v3.2.1
    • .addLayout 参数列表已更改，现在需要特殊结构的特殊对象
    • 修复了选择偏移计算
    • 引入了依赖于布局的 CSS 类，允许键盘样式根据布局代码进行设计
    • 修复了 FF 中损坏的汉字布局的错误
  • 2007年7月2日
    • VirtualKeyboard v3.2.0b3
    • 增加了简体中文拼音 US、简体中文仓颉、Lakhota 标准布局
    • 增加了设置脚本中可配置的布局分组
    • 引入了新的回调格式，包含 'load' 和 'activate' 方法
  • 2007年6月14日
    • VirtualKeyboard v3.2.0b1
    • 增加了 IME 支持
    • 增加了简体中文 IME 布局
    • 增加了对页面 vk_layout 和 vk_loader.js 的 layout 参数的支持，用于设置初始布局
  • 2007年5月30日
    • VirtualKeyboard v3.1.0
    • 修复了 Opera 中脚本包含问题，阻止了键盘在那里工作
    • 引入了“二进制”布局格式，节省了约 40% 的布局大小
    • 增加了用于布局设置的 PHP 脚本
    • 增加了对空按钮的支持
    • 增加了蒙古语西里尔字母布局
  • 2007年4月4日
    • VirtualKeyboard v3.0.6
    • 紧急更新，修复了死键处理
  • 2007年4月3日
    • VirtualKeyboard v3.0.5
    • 所有 CSS 操作都移至 DOM.CSS 类
    • 事件处理使用 EventManager 类完成
    • 在按键翻译中增加了几个修复
    • 在目标输入字段上添加了 VK_no_anim CSS 类检查，以禁用那里的键动画
  • 2007年3月7日
    • VirtualKeyboard v3.0.3
    • 增加了 Ctrl 按钮，并通过 Alt+Ctrl 模拟修复了 AltGr
    • 修复了 CSS，增加了对 FF1.0.5 和 IE5.5 的支持
  • 2007年3月5日
    • VirtualKeyboard v3.0.2
    • 增加了 61 种语言和 119 种布局
    • 修复了键盘输入翻译
    • 增加了连字支持
    • 修复了“零宽度重音”字符的显示
  • 2007年2月23日
    • VirtualKeyboard v3.0.1
    • 增加了对 MSKLC 的支持
    • 增加了皮肤支持
    • 支持 48 种语言和 98 种布局
  • 2007年1月13日
    • 在 CodeProject 的首次发布
    • VirtualKeyboard 核心 v3.0b2
© . All rights reserved.