文档章节

js+c#打造多语种输入法虚拟键盘的网站在线输入(创世纪篇)

crossmix
 crossmix
发布于 2015/11/27 10:08
字数 893
阅读 461
收藏 3
点赞 0
评论 0

   个性化的VirtualKeyboard,虚拟键盘,即不需要用输入法打字,直接在网页中实现多语种在线输入。有点类似沪江小D,dahanyu.com,青云在线的网站。

   最近做项目时,客户需要利用触摸屏进行操作,不外接鼠标键盘,但要求能录入文字,包括数字,英文,中文,德文,法文,西文等,这有点类似于google translate .

   Google Translate 产品 Google 翻译输入框已整合 Google 输入工具,可以实现 Google 翻译支持的 65 种不同语言间输入法的切换,例如中文,从翻译语言中选择源为中文,翻译框左边会多出一个输入法按钮,点击即可激活输入法,并且可以通过输入法菜单选择默认的拼音输入法之外的五笔、注意输入法等输入方式。图下,

javascript语言实现(适合php网站)

其实要实现类似于Google多语种 虚拟键盘输入,是靠js来实现的,js有一款功能强大的JS虚拟键盘插件----virtualkeyboard.

  VirtualKeyboard,它内置了100多种键盘布局和200多种输入法,9套可选皮肤方案,而且支持自建输入法,功能相当强大。开发类似谷歌在线输入多语种键盘绰绰有余,有些可以自定义添加。

  图:

我正在做网页前端开发,自然上路啦,let't do it!

  

项目页面中引用JS文件:

<script type="text/javascript" src="jscripts/vk_loader.js?vk_layout=CN%20Chinese%20Simpl.%20Pinyin&vk_skin=flat_gray" ></script>

解释一下:vk_layout=CN%20Chinese%20Simpl.%20Pinyin 表示默认输入法设置为简体中文,

vk_skin=flat_gray 表示默认皮肤选用flat_gray。这两个可以根据个人需要进行设置。

  调用/隐藏虚拟键盘的函数:

VirtualKeyboard.toggle("txt_Search", "softkey");
  txt_Search是文本框的ID,softkey是虚拟键盘显示位置元素的ID。

  下面是个简单的例子:

code:

<html> <head>   <script type="text/javascript" src="vk_loader.js?vk_layout=CN%20Chinese%20Simpl.%20Pinyin&vk_skin=flat_gray" ></script> </head> <body> <input type="text" id="txt_Search" onfocus="VirtualKeyboard.toggle('txt_Search', 'softkey')" onblur="VirtualKeyboard.toggle('txt_Search','softkey');" /> <div id="softkey"></div> </body> </html>

手动添加多语言

<select id=\"kb_langselector\"></select>" + "<select id=\"kb_mappingselector\"></select>"
  kb_mappingselector是键盘布局选择框的ID,kb_langselector是输入法选择框的ID,kb_langselector就是我们要的ID。

网站所使用的框架是jquery.


还有一种语言c#(asp.net网站)

C#Winform实现简单的虚拟键盘


关键技术点有两个:

1.将键盘所在的窗体设置为浮动工具条窗体。只要将窗体的CreateParams重写即可,这样窗体就不会获取焦点,代码如下:

#region 将当前窗体指定为浮动工具条窗体
public enum WindowStyles : uint
{

WS_OVERLAPPED =  0x00000000 ,
    WS_POPUP =  0x80000000 ,
    WS_CHILD =  0x40000000 ,
    WS_MINIMIZE =  0x20000000 ,
    WS_VISIBLE =  0x10000000 ,
    WS_DISABLED =  0x08000000 ,
    WS_CLIPSIBLINGS =  0x04000000 ,
    WS_CLIPCHILDREN =  0x02000000 ,
    WS_MAXIMIZE =  0x01000000 ,
    WS_BORDER =  0x00800000 ,
    WS_DLGFRAME =  0x00400000 ,
    WS_VSCROLL =  0x00200000 ,
    WS_HSCROLL =  0x00100000 ,
    WS_SYSMENU =  0x00080000 ,
    WS_THICKFRAME =  0x00040000 ,
    WS_GROUP =  0x00020000 ,
    WS_TABSTOP =  0x00010000 ,

    WS_MINIMIZEBOX =  0x00020000 ,
    WS_MAXIMIZEBOX =  0x00010000 ,

    WS_CAPTION = WS_BORDER | WS_DLGFRAME,
    WS_TILED = WS_OVERLAPPED,
    WS_ICONIC = WS_MINIMIZE,
    WS_SIZEBOX = WS_THICKFRAME,
    WS_TILEDWINDOW = WS_OVERLAPPEDWINDOW,

    WS_OVERLAPPEDWINDOW = WS_OVERLAPPED | WS_CAPTION | WS_SYSMENU | WS_THICKFRAME | WS_MINIMIZEBOX | WS_MAXIMIZEBOX,
    WS_POPUPWINDOW = WS_POPUP | WS_BORDER | WS_SYSMENU,
    WS_CHILDWINDOW = WS_CHILD,

     // Extended Window Styles

    WS_EX_DLGMODALFRAME =  0x00000001 ,
    WS_EX_NOPARENTNOTIFY =  0x00000004 ,
    WS_EX_TOPMOST =  0x00000008 ,
    WS_EX_ACCEPTFILES =  0x00000010 ,
    WS_EX_TRANSPARENT =  0x00000020 ,

     // #if(WINVER >= 0x0400)

    WS_EX_MDICHILD =  0x00000040 ,
    WS_EX_TOOLWINDOW =  0x00000080 ,
    WS_EX_WINDOWEDGE =  0x00000100 ,
    WS_EX_CLIENTEDGE =  0x00000200 ,
    WS_EX_CONTEXTHELP =  0x00000400 ,

    WS_EX_RIGHT =  0x00001000 ,
    WS_EX_LEFT =  0x00000000 ,
    WS_EX_RTLREADING =  0x00002000 ,
    WS_EX_LTRREADING =  0x00000000 ,
    WS_EX_LEFTSCROLLBAR =  0x00004000 ,
    WS_EX_RIGHTSCROLLBAR =  0x00000000 ,

WS_EX_CONTROLPARENT = 0x00010000,
    WS_EX_STATICEDGE = 0x00020000,
    WS_EX_APPWINDOW = 0x00040000,

    WS_EX_OVERLAPPEDWINDOW = (WS_EX_WINDOWEDGE | WS_EX_CLIENTEDGE),
    WS_EX_PALETTEWINDOW = (WS_EX_WINDOWEDGE | WS_EX_TOOLWINDOW | WS_EX_TOPMOST),

    //#endif /* WINVER >= 0x0400 */

    
//#if(WIN32WINNT >= 0x0500)

    WS_EX_LAYERED = 0x00080000,

    //#endif /* WIN32WINNT >= 0x0500 */

    
//#if(WINVER >= 0x0500)

    WS_EX_NOINHERITLAYOUT = 0x00100000// Disable inheritence of mirroring by children
    WS_EX_LAYOUTRTL = 0x00400000// Right to left mirroring

    
//#endif /* WINVER >= 0x0500 */

    
//#if(WIN32WINNT >= 0x0500)

    WS_EX_COMPOSITED = 0x02000000,
    WS_EX_NOACTIVATE = 0x08000000

    //#endif /* WIN32WINNT >= 0x0500 */

}
protected override CreateParams CreateParams
{
    get
    {
        CreateParams ret = base.CreateParams;
        ret.Style = (int)WindowStyles.WS_THICKFRAME | (int)WindowStyles.WS_CHILD;
        ret.ExStyle |= (int)WindowStyles.WS_EX_NOACTIVATE | (int)WindowStyles.WS_EX_TOOLWINDOW;
        ret.X = this.Location.X;
        ret.Y = this.Location.Y;
        return ret;
    }
}

#endregion

 

像沪江小D网站就是c#语言的实现。

end

david he随笔


© 著作权归作者所有

共有 人打赏支持
crossmix
粉丝 65
博文 305
码字总数 645711
作品 0
广州
高级程序员
语音识别率再提升!讯飞输入法引领交互方式,以AI赋能保乡音

2018年6月12日,讯飞输入法在京举办了主题为“爱输入·更懂你”的媒体见面会,并正式启动“AI方言发音人招募”公益行动。在这场以“交互方式和AI赋能保护濒危方言”为核心的发布会开始之前,...

智科技
06/13
0
0
MrEO/QmlInputMethod

QML输入法 本项目分为两个模块:中文输入法和虚拟键盘 其中输入法模块可单独使用,而虚拟键盘模块依赖输入法模块 输入法 Introduction QML输入法,过滤键盘事件,分割拼音并从数据库获取词组...

MrEO
01/02
0
0
iOS 输入框限制字数一步到位

// 注册输入框改变监听方法 [editTF addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEditingChanged]; // 以下为输入框改变方法实现: - (void)textF......

小鹏GG丶
2017/11/01
0
0
人工智能离我们有多近?看看你正在打字的输入法!

  这个世界上,最公平的就是时间,但往往造就不公平的人生。为什么你跟别人花了一样的时间,却不如别人输出的内容多,拉开你们之间差距的到底是什么?或许不是能力、也不是聪明才智,很可能...

人工智能那些事
04/12
0
0
LaserKBD —— 开源低成本虚拟激光键盘 [国产]

这里我们很荣幸向大家介绍由我们团队成员设计的开源低成本的虚拟激光键盘方案! 通过本方案,您也可制作出自己的虚拟激光键盘来:) 我们的开源版本支持多搭10个按键的键盘事件输入,支持组合键...

oschina
2013/08/13
8
0
几行代码为自己的网站添加划词翻译功能

为网站添加自动翻译网页、网页划词、在线翻译、在线词典、每日一句功能。  适合各类网站  百变语种,自动翻译网页   把中文的网站,变成十几种不同语种的网站,会不会感觉很新奇? 要实...

crossmix
2015/04/26
0
1
Fcitx 4.1 的开发进度

Fcitx──小企鹅输入法:Free Chinese Input Toy for X是一个以 GPL方式发布的、基于XIM的简体中文输入法(即原来的G五笔),包括拼音(全拼和双拼)、区位以及码表输入模块,是在Linux操作系统中...

红薯
2011/06/02
1K
9
android之inputType属性

android 1.5以后添加了软件虚拟键盘的功能,所以在输入提示中将会有对应的软键盘模式 android中inputType属性在EditText输入值时启动的虚拟键盘的风格有着重要的作用。这也大大的方便的操作。...

liuzs1208
2014/07/04
0
0
Qt虚拟键盘更新,支持手写识别功能

Qt官方博客发布消息称,新版本的Qt虚拟键盘支持手书写识别功能(HWR)、性能改进、Nuance T9书写一体化,并支持繁体中文! Qt虚拟键盘日前发布了新功能和版本控制方案的更新。作为最近的许可...

Miss_Hello_World
2016/03/24
834
0
科大讯飞年度发布会 人工智能应用真的很有AI

  2017年11月9日,科大讯飞年度发布会再次主打AI+,与以往不同的是AI技术赋能与更多应用,发布了十余款新品。      科大讯飞董事长刘庆峰阐述了科大讯飞的AI路径以及一年以来讯飞人工...

人工智能那些事
2017/11/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring配置xml启动报错 Connot find 'beans'

1.我们先看一下spring的原始配置 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSc......

江湖鱼大虾
刚刚
0
0
与女儿谈商业模式 (4):戴尔的成功秘诀

分类:与女儿谈商业模式 | 标签: 戴尔 经济学 陈志武 2007-05-15 10:26阅读(7434)评论(36)   2007年5月《创富志》与“女儿谈商业模式”专栏 (之四)   戴尔的成功秘诀   陈志武   ...

祖冲之
10分钟前
0
0
www.w3.org被qiang导致logback报错:Connect reset

web项目部署到tomcat后,web项目中的logback不能运行,报错信息如下: Reported exception: ch.qos.logback.core.joran.spi.JoranException: I/O error occurred while parsing xml file......

浮躁的码农
24分钟前
0
0
JDeveloper中文乱码解决

全局设置字体; 全局设置环境编码; 项目设置编译器环境编码。

wffger
51分钟前
2
0
MySQL主从介绍 , 准备工作,配置主,配置从, 测试主从同步

MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主从后,在A上写数据,另外一台B也会跟着写数据,两者数据实时同步的 MySQL主从是基于binlog的,主上须开启bin...

TaoXu
今天
2
0
线性代数学习总结

亭子happy
今天
1
0
Java8:Lambda表达式增强版Comparator和排序

1、概述 在这篇教程里,我们将要去了解下即将到来的JDK 8(译注,现在JDK 8已经发布了)中的Lambda表达式——特别是怎样使用它来编写Comparator和对集合(Collection)进行排序。 这篇文章是...

孟飞阳
今天
0
0
从架构到组件,深挖istio如何连接、管理和保护微服务2.0?

近几年我一直从事于微服务系统的设计以及实现方面的工作,属于微服务架构一线实践者。之前做过一些单体系统的微服务改造,在微服务拆分、治理等方面都有一定的经验。 本人比较特殊一点的经历...

xiaomin0322
今天
1
0
基于vue的h5文件切片上传(获取文件md5,实现秒传、进度条实现)

template <button @click="file"></button><label ref="upload" style="position: relative;"> <input type="file" @change="selectFile" style="position: abs......

hkaikai
今天
2
0
Spring Boot 2.0 项目实现自同步AD域账号

在通过Spring Boot的自动化装配功能及JDK自带的LDAP模块,可通过如下几个简单步骤实现业务系统自动同步AD域账号功能。 1. Java自带ldap搜索域账号信息核心代码: try { LdapContext ctx...

B超
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部