下載Mindfusion最新版本

本文將演示如何創建僅在用戶開始在文本框中鍵入時呈現的鍵盤。當用戶在文本框外部單擊時，虛擬鍵盤將消失。還有一個額外的 - 右邊的一系列語言。選擇語言后，鍵盤僅呈現所選語言中的特殊符號。

該應用程序使用MindFusion虛擬鍵盤JavaScript。以下是該應用程序的屏幕截圖：

JavaScript中的虛擬鍵盤，僅在用戶開始鍵入時呈現。鍵盤為多種語言呈現特殊符號。

I.西班牙語，德語和法語的鍵盤

使用包含JavaScript鍵盤庫的虛擬鍵盤布局創建工具創建三種具有三種語言特殊符號的鍵盤布局。我們創建一個新的緊湊型鍵盤并刪除大多數鍵。我們鍵入所需的鍵作為其余的字符，并使用“屬性”選項卡設置鍵盤的大小，以及布局和鍵對齊。最后，我們將新的鍵盤布局導出為json文件（文件→導出JavaScript。最好將鍵盤布局保存為xml（文件→另存為）。這樣你可以加載鍵盤增益，當你需要基于它創建另一個布局或更正此布局。

我們現在創建了三個json文件：

• french-symbols.js
• german-symbols.js
• spanish-symbols.js

讓我們看看其中一個json文件的內容：

var layoutDef =
{
	width: 565,
	height: 115,
	keys:
[	{	
		code: 162,
		type: "regular",
		content: "ù",
		left: 9,
		top: 10,
		width: 40,
		height: 40
	},
	{	
		code: 162,
		type: "regular",
		content: "û",
		left: 56,
		top: 10,
		width: 40,
		height: 40
	},
………
{	
		code: 162,
		type: "regular",
		content: "œ",
		left: 507,
		top: 58,
		width: 40,
		height: 40
	}
]
};

每個文件都包含一個名為“numpadDef”的數組。我們需要更改名稱，因為我們將在選擇某種語言時加載每個列表，這意味著我們必須能夠區分這些語言。我們將列表重命名為layoutDefFr，layoutDefDe和layoutDefEs。

以下是虛擬鍵盤布局創建工具的外觀：

虛擬鍵盤布局創建工具，它是MindFusion的JavaScript鍵盤庫的一部分

II.HTML網頁

我們創建一個簡單的網頁，在其中添加對虛擬鍵盤庫的JavaScript文件的引用：

<a href="//Keyboard.js">//Keyboard.js</a>

請注意，我們將此引用放在結束標記之后的文件末尾。我們需要引用JavaScript文件以及我們在步驟I中創建的虛擬鍵盤的定義。

<script src="french-symbols.js" type="text/javascript"></script>
<script src="spanish-symbols.js" type="text/javascript"></script>
<script src="german-symbols.js" type="text/javascript"></script>

最后，我們添加一個JavaScript文件的引用，該文件將保存我們的示例代碼。現在它將是空的。

<script src="HiddenKeyboard.js" type="text/javascript"></script>

下一步是使用JS鍵盤的樣式加載CSS文件。我們選擇了Silver主題，您可以選擇您想要的主題或創建自定義主題。

<link href="css/VirtualKeyboard.Silver.css" rel="Stylesheet" />

我們還添加了一個對正確對齊的樣式表的引用

帶鍵盤，文本區域和選擇列表的元素。

<link href="style.css" rel="Stylesheet">

它包含的代碼純粹是為了正確對齊元素，我們不會檢查它的內容。

現在，讓我們創建文本區域：

<form id="f1">
<textarea id="text" rows="15" cols="55"></textarea>
…….
</form>

我們創建一個名為f1的表單，然后創建HTML textarea元素。它處理事件：onfocus和onblur。

接下來，表單包含一個帶有三種語言的select，其鍵盤上有我們準備的特殊符號：

<select id="selectedLang" size="3">
<option value="Fr">French</option>
<option value="De">German</option>
<option value="Es">Spanish</option>

</select>

在表單外面，我們使用鍵盤進行隱藏：

<div id="keyboard" style="width: 565px;height: 115px" />

虛擬鍵盤將以固定大小呈現，默認情況下不會呈現，例如它的顯示設置為“None”。

III.JavaScript代碼隱藏文件

首先，我們添加兩個命名空間映射：

var VirtualKeyboard = MindFusion.VirtualKeyboard;
var KeyboardLayout = MindFusion.KeyboardLayout;

然后我們處理DOMContentLoaded事件以創建虛擬鍵盤對象。我們使用表示鍵盤的div元素作為VirtualKeyboard構造函數的參數。我們在HTML頁面中為div元素提供了一個id。

我們還將語言列表中元素的選定索引設置為-1，例如，默認情況下不選擇任何語言，鍵盤將顯示標準的英文鍵入鍵盤。

document.addEventListener("DOMContentLoaded", function (event)
{
	document.getElementById("selectedLang").selectedIndex = -1;
	
	var vk = VirtualKeyboard.create(
		document.getElementById("keyboard"));
	vk.setScaleToFitParent(false);	

…………………

});

然后我們處理語言選擇的變化：

f1.selectedLang.onchange = function (event)
	{
		
	switch (event.target.value) {
  case 'Fr':
    vk.setLayout(KeyboardLayout.create(layoutDefFr));
    break;
  case 'De':
  vk.setLayout(KeyboardLayout.create(layoutDefDe));
  break;
  case 'Es':
    vk.setLayout(KeyboardLayout.create(layoutDefEs));
    break;	
    } 
 }

當用戶選擇我們的一個自定義布局時，我們使用相應的layoutDef對象創建鍵盤布局。

接下來，我們使用showKeyboard（）和hideKeyboard（）方法處理onfocus和onblur事件。他們只是使鍵盤可見或不可見的div：

function showKeyboard() { 
		
	var x = document.getElementById("keyboard"); 
		x.style.display = "block";			
	}
	
	function hideKeyboard() {
    var x = document.getElementById("keyboard");    
        x.style.display = "none";
    
	}

購買Mindfusion正版授權，請點擊“”喲！