下載Mindfusion最新版本

本文將演示如何創(chuàng)建僅在用戶(hù)開(kāi)始在文本框中鍵入時(shí)呈現(xiàn)的鍵盤(pán)。當(dāng)用戶(hù)在文本框外部單擊時(shí)，虛擬鍵盤(pán)將消失。還有一個(gè)額外的 - 右邊的一系列語(yǔ)言。選擇語(yǔ)言后，鍵盤(pán)僅呈現(xiàn)所選語(yǔ)言中的特殊符號(hào)。

該應(yīng)用程序使用MindFusion虛擬鍵盤(pán)JavaScript。以下是該應(yīng)用程序的屏幕截圖：

JavaScript中的虛擬鍵盤(pán)，僅在用戶(hù)開(kāi)始鍵入時(shí)呈現(xiàn)。鍵盤(pán)為多種語(yǔ)言呈現(xiàn)特殊符號(hào)。

I.西班牙語(yǔ)，德語(yǔ)和法語(yǔ)的鍵盤(pán)

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

我們現(xiàn)在創(chuàng)建了三個(gè)json文件：

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

讓我們看看其中一個(gè)json文件的內(nèi)容：

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

每個(gè)文件都包含一個(gè)名為“numpadDef”的數(shù)組。我們需要更改名稱(chēng)，因?yàn)槲覀儗⒃谶x擇某種語(yǔ)言時(shí)加載每個(gè)列表，這意味著我們必須能夠區(qū)分這些語(yǔ)言。我們將列表重命名為layoutDefFr，layoutDefDe和layoutDefEs。

以下是虛擬鍵盤(pán)布局創(chuàng)建工具的外觀(guān)：

虛擬鍵盤(pán)布局創(chuàng)建工具，它是MindFusion的JavaScript鍵盤(pán)庫(kù)的一部分

II.HTML網(wǎng)頁(yè)

我們創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，在其中添加對(duì)虛擬鍵盤(pán)庫(kù)的JavaScript文件的引用：

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

請(qǐng)注意，我們將此引用放在結(jié)束標(biāo)記之后的文件末尾。我們需要引用JavaScript文件以及我們?cè)诓襟EI中創(chuàng)建的虛擬鍵盤(pán)的定義。

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

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

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

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

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

我們還添加了一個(gè)對(duì)正確對(duì)齊的樣式表的引用

帶鍵盤(pán)，文本區(qū)域和選擇列表的元素。

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

它包含的代碼純粹是為了正確對(duì)齊元素，我們不會(huì)檢查它的內(nèi)容。

現(xiàn)在，讓我們創(chuàng)建文本區(qū)域：

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

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

接下來(lái)，表單包含一個(gè)帶有三種語(yǔ)言的select，其鍵盤(pán)上有我們準(zhǔn)備的特殊符號(hào)：

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

</select>

在表單外面，我們使用鍵盤(pán)進(jìn)行隱藏：

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

虛擬鍵盤(pán)將以固定大小呈現(xiàn)，默認(rèn)情況下不會(huì)呈現(xiàn)，例如它的顯示設(shè)置為“None”。

III.JavaScript代碼隱藏文件

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

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

然后我們處理DOMContentLoaded事件以創(chuàng)建虛擬鍵盤(pán)對(duì)象。我們使用表示鍵盤(pán)的div元素作為VirtualKeyboard構(gòu)造函數(shù)的參數(shù)。我們?cè)贖TML頁(yè)面中為div元素提供了一個(gè)id。

我們還將語(yǔ)言列表中元素的選定索引設(shè)置為-1，例如，默認(rèn)情況下不選擇任何語(yǔ)言，鍵盤(pán)將顯示標(biāo)準(zhǔn)的英文鍵入鍵盤(pán)。

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

…………………

});

然后我們處理語(yǔ)言選擇的變化：

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

當(dāng)用戶(hù)選擇我們的一個(gè)自定義布局時(shí)，我們使用相應(yīng)的layoutDef對(duì)象創(chuàng)建鍵盤(pán)布局。

接下來(lái)，我們使用showKeyboard（）和hideKeyboard（）方法處理onfocus和onblur事件。他們只是使鍵盤(pán)可見(jiàn)或不可見(jiàn)的div：

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

購(gòu)買(mǎi)Mindfusion正版授權(quán)，請(qǐng)點(diǎn)擊“”喲！