js+c#打造多语种输入法虚拟键盘的网站在线输入(创世纪篇)
发布日期:2021-08-27 14:54:01 浏览次数:2 分类:技术文章

本文共 3680 字,大约阅读时间需要 12 分钟。

hot3.png

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

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

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

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

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

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

  图:

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

  

项目页面中引用JS文件:

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

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

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

VirtualKeyboard.toggle("txt_Search", "softkey");

  txt_Search是文本框的ID,softkey是虚拟键盘显示位置元素的ID。

  下面是个简单的例子:

code:

        

手动添加多语言

<select id=\"kb_langselector\"></select>" + "<select id=\"kb_mappingselector\"></select>"

  kb_mappingselector是键盘布局选择框的ID,kb_langselector是输入法选择框的ID,kb_langselector就是我们要的ID。

网站所使用的框架是jquery.

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

关键技术点有两个:

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随笔

转载于:https://my.oschina.net/bigfool007139/blog/536277

转载地址:https://blog.csdn.net/weixin_33918357/article/details/92669658 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:jquery新篇--网站如何返回顶部(仿淘宝,人人网,新浪微博网站)
下一篇:xenapp日志错误提示Citrix XenApp Commands Remoting service 无法启动

发表评论

最新留言

不错!
[***.144.177.141]2024年04月14日 03时57分48秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

MySQL笔记-死锁原理与分析及InnoDB中如何减少死锁 2021-06-30
MySQL笔记-MDL锁(metadata lock) 2019-04-27
Qt文档阅读笔记-WebEngine Content Manipulatoin Example 2019-04-27
Android逆向笔记-使用Android Killer修改包名Android系统安装相同应用 2019-04-27
Qt工作笔记-profile中INSTALLS的使用 2019-04-27
Qt文档阅读笔记-隐式共享(Implicit Sharing)深入研究(理论及实例) 2019-04-27
Web前端笔记-使用@media(媒体查询)展示及隐藏div 2019-04-27
Qt文档阅读笔记-Qt对象模型及deleteLater()杂记 2019-04-27
Qt文档阅读笔记-QPointer的概念及实例(并发多线程实例) 2019-04-27
Qt文档阅读笔记-QScopedPointer解析及实例 2019-04-27
MySQL笔记-MySQL5.7解决root创建用户出现ERROR 1044(42000): Access denied for user 2019-04-27
DM工作笔记-查看会话(session)信息与关闭会话 2019-04-27
MySQL笔记-解决...mysql.sock (13)(两种情况会产生此问题) 2019-04-27
Android逆向笔记-通过字符串定位跳转点 2019-04-27
Web前后端笔记-vue封装http请求添加signature及后端(Java)解析并验证 2019-04-27
Web前后端笔记-通过对称加密算法和信息摘要算法防止数据重放 2019-04-27
Qt笔记-进程只能存在1个(Linux适用,Windows有思路) 2019-04-27
Spring Boot笔记-@Qualifier与@Autowired与@Bean 2019-04-27
Python笔记-uiautomator2环境搭建(安卓模拟器测试环境+windows开发环境) 2019-04-27
Python&Rabbitmq文档阅读笔记-生产者数据直接送入队列消费者消费 2019-04-27