js＋ｃ#打造多語種輸入法虛擬鍵盤的網站在線輸入（創世紀篇)

時間 2019-11-07

標籤 js+c 打造語種輸入法虛擬鍵盤網站在線輸入創世紀欄目 JavaScript 简体版

原文原文鏈接

個性化的VirtualKeyboard,虛擬鍵盤，即不須要用輸入法打字，直接在網頁中實現多語種在線輸入。有點相似滬江小D,dahanyu.com，青雲在線的網站。 javascript

最近作項目時，客戶須要利用觸摸屏進行操做，不外接鼠標鍵盤，但要求能錄入文字，包括數字，英文，中文，德文，法文，西文等，這有點相似於google translate . php

Google Translate 產品 Google 翻譯輸入框已整合 Google 輸入工具，能夠實現 Google 翻譯支持的 65 種不一樣語言間輸入法的切換，例如中文，從翻譯語言中選擇源爲中文，翻譯框左邊會多出一個輸入法按鈕，點擊便可激活輸入法，而且能夠經過輸入法菜單選擇默認的拼音輸入法以外的五筆、注意輸入法等輸入方式。圖下， html

javascript語言實現(適合php網站）前端

其實要實現相似於Google多語種虛擬鍵盤輸入，是靠js來實現的，js有一款功能強大的JS虛擬鍵盤插件----virtualkeyboard.
java

VirtualKeyboard，它內置了100多種鍵盤佈局和200多種輸入法，9套可選皮膚方案，並且支持自建輸入法，功能至關強大。開發相似谷歌在線輸入多語種鍵盤綽綽有餘，有些能夠自定義添加。 jquery

圖： app

我正在作網頁前端開發，天然上路啦，let't do it! 框架

項目頁面中引用JS文件： ide

<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＃（ａｓｐ．ｎｅｔ網站）

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;
    }
}