尝试将tamil虚拟键盘99添加到网页中..我有一些gif图像用作键盘中的键...问题是，键盘是固定的。如何只打开键盘，单击keyboard.png。
var mouseOverStyleVal = "2px inset #ccc";
var mouseOutStyleVal = "2px outset #E9E9E9";
var keyPressStyleVal = "1px inset #ccc";
var textControlIdValue = "editor";
var keyCode;
var key;
var keyCheck;
var prevChar;
var newKey;
var toggleEngTam = -1;
var capsLockOn = 1;
var shiftOn = 1;
var consecutiveCons = 0;
var consecutiveConsVal = "";
var disableJoin=0;
var caretOn = 0;
var consecutiveCaretOn = 0;
function addCharKeyPress(textControl, evt, keyChecker){
hideStatusBarBottom();
listenCurrentEvent(evt);
toggleShift(keyCode,16,16);
toggleCapsLock(keyCode,20)
if(capsLockOn==1|| shiftOn==1){
keyCode = String.fromCharCode(keyCode).toUpperCase().charCodeAt();
if (keyCode) key = String.fromCharCode(keyCode);
}
if(toggleEngTam == -1 )
{
keyCheck = keyChecker(keyCode, key);
return transKey(textControl, evt, keyChecker);
}
}
function listenCurrentEvent(evt){
if(typeof evt.which != 'undefined') keyCode = evt.which;
else if(typeof evt.keyCode != 'undefined') keyCode = evt.keyCode;
else if(typeof evt.charCode != 'undefined') keyCode = evt.charCode;
else keyCode = 0;
if (keyCode) key = String.fromCharCode(keyCode);
}
function toggleShift(title,val1,val2){
if(title == val1 ||title==val2) shiftOn = 1; //Shift key is in On mode
else shiftOn = 0; //Shift key is in off mode
}
function toggleCapsLock(title,val){
if(title == val) capsLockOn = -(capsLockOn);
}
function hideStatusBarBottom(){
document.getElementById('shiftcaps_status').innerHTML = "";
}
var enterKeyCount=0;
function engToTam (keyCode, key) {
if( keyCode!= 13)
cha = langMapping[String.fromCharCode(keyCode)][0];
else
cha = ""; //To fix the "langMapping[..][0] is null or not an object" error when press Enter
if (cha) {
return { replaceKey: true,
newKeyCode: cha.charCodeAt(),
newKey: cha
};
}
else {
return { cancelKey: false };
}
}
function transKey (textControl, evt, keyChecker) {
if (keyCode && window.event && !window.opera) {
if (keyCheck.cancelKey) {
return false;
}
else if (keyCheck.replaceKey) {
if (window.event.preventDefault) {
window.event.preventDefault();
}
setNewKey(textControl,keyCheck.newKey,engTamExp[key]);
return false;
}
else {
return true;
}
}
else if (typeof textControl.setSelectionRange != 'null') {
if (keyCheck.cancelKey) {
if (evt.preventDefault) {
evt.preventDefault();
}
return false;
}
else if (keyCheck.replaceKey) {
if (evt.preventDefault) {
evt.preventDefault();
}
setNewKey(textControl,keyCheck.newKey,engTamExp[key]);
return false;
}
else {
return true;
}
}
else if (keyCheck.cancelKey) {
if (evt.preventDefault) {
evt.preventDefault();
}
return false;
}
else {
return true;
}
}
function setNewKey(textControl,newKeyVal,vowGlyph){
var pos = getCursorPosition(textControl);
prevChar = getPrevChar(textControl.value,pos);
newKey = newKeyVal;
analyzedNewKey(vowGlyph);
textControl.value = textControl.value.substring(0, pos) + newKey + textControl.value.substring(pos);
textControl.focus();
inc = pos+newKey.length;
setCursorPosition(textControl,inc,inc,oldpos=pos);
}
function getCursorPosition(textControl){
if(document.selection)
return getCursorPositionIE(textControl);
else if(typeof textControl.setSelectionRange != 'undefined')
return getCursorPositionFF(textControl);
else
return textControl.length;
}
function getCursorPositionIE(textControl){
var len = textControl.value.length;
var pos = -1;
if(document.selection)
{
sel = document.selection.createRange();
obj = textControl.createTextRange();
obj.moveToBookmark(sel.getBookmark());
obj.moveEnd('character',textControl.value.length);
pos = len - obj.text.length;
}
return pos;
}
function getCursorPositionFF(textControl){
var currentSelectionStart=-1,currentSelectionEnd=-1;
if(typeof textControl.setSelectionRange != 'undefined'){
currentSelectionStart = textControl.selectionStart;
currentSelectionEnd = textControl.selectionEnd;
}
return currentSelectionStart;
}
function getPrevChar(txt,currentPosition){
return txt.substring(currentPosition-1,currentPosition);
}
function analyzedNewKey(vowGlyph){
newKeyPerm = newKey;//To keep the original value of newKey
if(prevChar){
if(prevChar==newKey && tamCon.toString().indexOf(prevChar)!=-1 && disableJoin!=1)
consecutiveCons++;
else consecutiveCons = 0;
if(newKey==prevChar && newKey!=consecutiveConsVal && consecutiveConsVal!="")
consecutiveCons=1;
if(newKey==prevChar && tamCon.toString().indexOf(prevChar)!=-1 && consecutiveCons%2 && consecutiveCons!=0 && disableJoin!=1)
{
newKey = "்"+newKey;
consecutiveConsVal = prevChar;
disableJoin = 0;
}
if( ((prevChar=="ங" && newKey=="க") || (prevChar=="ஞ" && newKey=="ச")|| (prevChar=="ந" && newKey=="த")|| (prevChar=="ண" && newKey=="ட")|| (prevChar=="ம" && newKey=="ப")|| (prevChar=="ன" && newKey=="ற")) && disableJoin!=1)
{
newKey = "்"+newKey;
consecutiveCons++;
}
if(tamCon.toString().indexOf(prevChar)!=-1 && tamVow.toString().indexOf(newKey)!=-1 && vowGlyph && disableJoin!=1)
newKey = vowGlyph;
if(newKeyPerm=="அ" && tamCon.toString().indexOf(prevChar)!=-1 )
{
newKey = "";
disableJoin=1;
}else disableJoin = 0;
if(newKey==tamPul && tamCon.toString().indexOf(prevChar)==-1 )
newKey = "ஃ";
}else{
//to remove 1st character pulli
if(newKey==tamPul)
newKey = "";
}
if(caretOn && newKeyPerm==".") {newKey = "•";caretOn = 0;}
if(caretOn && newKeyPerm=="௵") {newKey = "©";caretOn = 0;}//v1.2.1
if(caretOn && newKeyPerm=="7") {newKey = "‘";caretOn = 0;}
if(caretOn && newKeyPerm=="8") {newKey = "’";caretOn = 0;}
if(caretOn && newKeyPerm=="9") {newKey = "“";caretOn = 0;}
if(caretOn && newKeyPerm=="0") {newKey = "”";caretOn = 0;}
if(caretOn && newKeyPerm=="s") {newKey = " ";caretOn = 0;}
if((caretOn && newKeyPerm=="ஆ") || (caretOn && newKeyPerm=="இ")|| (caretOn && newKeyPerm=="ஈ")|| (caretOn && newKeyPerm=="உ")|| (caretOn && newKeyPerm=="ஊ")|| (caretOn && newKeyPerm=="எ")|| (caretOn && newKeyPerm=="ஏ")|| (caretOn && newKeyPerm=="ஐ")|| (caretOn && newKeyPerm=="ஒ")|| (caretOn && newKeyPerm=="ஓ")|| (caretOn && newKeyPerm=="ஔ") ) {newKey = uirVis[newKeyPerm];caretOn = 0;}//v1.2.1
if(caretOn && newKeyPerm =="^"){newKey = "^";caretOn = 0;consecutiveCaretOn=1}
if(caretOn && newKey=="ஃ") {newKey = "்";caretOn = 0;}
if(consecutiveCaretOn!=1 && newKeyPerm == "^"){
newKey = "";
caretOn = 1
}
consecutiveCaretOn = 0; //Tamil99 Rule = 10
}
function setCursorPosition(textControl,oStart,oEnd,oldpos) {
if( textControl.setSelectionRange ) {
textControl.setSelectionRange(oStart,oEnd);
}
else if( textControl.createTextRange ) {
var obj = textControl.createTextRange();
obj.collapse(true);
obj.moveEnd('character',oEnd);
obj.moveStart('character',oStart);
obj.select();
}
}
function addW3Tamil (character) {
var title = parseInt(character.id);
var textControl = document.getElementById(textControlIdValue);
textControl.focus();
character.style.border = keyPressStyleVal;
toggleCapsLock(title,29);
if(!(title==29 || title==42 || title==53)){
if(shiftOn || capsLockOn==1) title = title+500;
newKey = "";
if(clickMapping[title])
if(toggleEngTam == -1){
if(langMapping[clickMapping[title]][0])
newKey = langMapping[clickMapping[title]][0];
}else{
if(clickMapping[title])
newKey = clickMapping[title];
}
setNewKey(textControl,newKey,uirVis[newKey]);
}
toggleShift(title,42,53);
displayStatusBar();
displayStatusBarBottom();
}
function displayStatusBar(){
document.getElementById('lang_status').innerHTML = "<b>Language Mode</b> = <a href='#' title='Indicates the Input Language mode; Click here to change the language mode' onclick='toggleEngTam=-toggleEngTam;displayStatusBar();'>"+((toggleEngTam==-1)?" Tamil":"English")+"</a><i>(To change, click on the link OR press</i> <font color='brown'>F12</font><i> key)</i><br />";
document.getElementById('keyboard_status').style.width = "90%";
document.getElementById('keyboard_status').style.padding = "3px";
document.getElementById('keyboard_status').style.border = "1px solid #fff";
}
function displayStatusBarBottom(){
document.getElementById('shiftcaps_status').innerHTML = "<b>SHIFT</b> = "+((shiftOn==1)?" On":"Off")+"; <b>CAPSLOCK</b> = "+((capsLockOn==1)?" On":"Off");
}
function toggleLangMode(evt)
{
listenCurrentEvent(evt);
if(keyCode == 123) toggleEngTam = -(toggleEngTam); //F12 key's keyCode = 123
toggleShift(keyCode,16,16); //shift key's keyCode = 16
toggleCapsLock(keyCode,20) //capslock key's keyCode = 20
displayStatusBar();
}
function resetIt()
{
document.getElementById('searchResult_searchword').value='';
document.getElementById('editor').value='';
}
function keyDownBorder(obj){
if(keyIdCode[keyCode])
document.getElementById(keyIdCode[keyCode]).style.border = mouseOverStyleVal;
}
function keyUpBorder(kid){
for(i=1;i<=60;i++)
document.getElementById(i).style.border = mouseOutStyleVal;
}
function overW3Tamil(obj){
obj.style.border = mouseOverStyleVal;
}
function Clear()
{
document.getElementById('editor').value = "";
}
function fncEnter()
{
document.getElementById('editor').click();
}
function back() {
var input, num;
input = document.getElementById('editor');
num = input.value;
input.value = num.slice(0,num.length-1);
return false;
}
function outW3Tamil(obj){
obj.style.border = mouseOutStyleVal;
}
function copyit() {
var textControl= document.getElementById(textControlIdValue);
var alertMsg1 = "You've selected";
var alertMsg2="";
textControl.focus();
textControl.select();
if(typeof textControl.createTextRange!= 'undefined'){
therange=textControl.createTextRange();
therange.execCommand("Copy");
alertMsg2=" and copied into the clipboard successfully.";
}else alertMsg2=" successfully.\n To copy use one of the following:\n* EDIT->COPY \nor\n* RIGHT MOUSE CLICK->COPY";
alert(alertMsg1+alertMsg2);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>w3Tamil Web Keyboard (Beta v1.2.1) - Tamil99 Keyboard Layout</title>
<!-- w3TamilWK - Section 1 - START -->
<script language="JavaScript1.2" src="w3tamil_wk_includes/js/w3tamil_wk_library.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="w3tamil_wk_includes/js/w3tamil_wk_mappings.js" type="text/javascript"></script>
<link rel="stylesheet" href="w3tamil_wk_includes/css/w3tamil_wk_style.css" />
<!-- w3TamilWK - Section 1 - END -->
</head>
<body>
<div id="keyboard_container">
<div id="keyboard" align="center">
<div id="keyboard_editor">
<form name="editorForm">
<!--<input type="text" name="editor" class="keyboardInput"onkeypress="return addCharKeyPress(this, event,engToTam);" onkeyDown="toggleLangMode(event);keyDownBorder(this);" onkeyup="keyUpBorder(this)"/> -->
<input type="text"name="editor" id="editor" onkeypress="return addCharKeyPress(this, event,engToTam);" onkeyDown="toggleLangMode(event);keyDownBorder(this);" onkeyup="keyUpBorder(this)"/>
<img src="keyboard.png"alt="keyboard">
<br />
</form>
</div>
<br/>
<br/>
<div id="row_1">
<span id="key_1_1"><img id="1" src="w3tamil_wk_includes/images99/approx.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_2"><img id="2" src="w3tamil_wk_includes/images99/1.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_3_"><img id="3" src="w3tamil_wk_includes/images99/2.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_4"><img id="4" src="w3tamil_wk_includes/images99/3.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_5"><img id="5" src="w3tamil_wk_includes/images99/4.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_6"><img id="6" src="w3tamil_wk_includes/images99/5.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_7"><img id="7" src="w3tamil_wk_includes/images99/6.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_8"><img id="8" src="w3tamil_wk_includes/images99/7.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_9"><img id="9" src="w3tamil_wk_includes/images99/8.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_10"><img id="10" src="w3tamil_wk_includes/images99/9.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_11"><img id="11" src="w3tamil_wk_includes/images99/0.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_12"><img id="12" src="w3tamil_wk_includes/images99/minus.gif" width="39" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_13"><img id="13" src="w3tamil_wk_includes/images99/plus.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_14"><img id="14" src="w3tamil_wk_includes/images99/backspace.gif" onclick="back()"width="38" height="38" alt="" style="cursor:default" /></span>
</div>
<div id="row_2">
<span id="key_2_2"><img id="16" src="w3tamil_wk_includes/images99/Q.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_3"><img id="17" src="w3tamil_wk_includes/images99/W.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_4"><img id="18" src="w3tamil_wk_includes/images99/E.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_5"><img id="19" src="w3tamil_wk_includes/images99/R.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_6"><img id="20" src="w3tamil_wk_includes/images99/T.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_7"><img id="21" src="w3tamil_wk_includes/images99/Y.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_8"><img id="22" src="w3tamil_wk_includes/images99/U.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_9"><img id="23" src="w3tamil_wk_includes/images99/I.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_10"><img id="24" src="w3tamil_wk_includes/images99/O.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_11"><img id="25" src="w3tamil_wk_includes/images99/P.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_12"><img id="26" src="w3tamil_wk_includes/images99/BRACKET_START.gif" width="39" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_13"><img id="27" src="w3tamil_wk_includes/images99/BRACKET_END.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_14"><img id="28" src="w3tamil_wk_includes/images99/PIPE.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_1"><img id="15" src="w3tamil_wk_includes/images99/CLEAR.gif" onclick="Clear()"width="38" height="38" alt="" style="cursor:default" /></span>
</div>
<div id="row_3">
<span id="key_3_1"><img id="29" src="w3tamil_wk_includes/images99/CAPSLOCK.gif" width="59" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_2"><img id="30" src="w3tamil_wk_includes/images99/A.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_3"><img id="31" src="w3tamil_wk_includes/images99/S.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_4"><img id="32" src="w3tamil_wk_includes/images99/D.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_5"><img id="33" src="w3tamil_wk_includes/images99/F.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_6"><img id="34" src="w3tamil_wk_includes/images99/G.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_7"><img id="35" src="w3tamil_wk_includes/images99/H.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_8"><img id="36" src="w3tamil_wk_includes/images99/J.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_9"><img id="37" src="w3tamil_wk_includes/images99/K.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_10"><img id="38" src="w3tamil_wk_includes/images99/L.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_11"><img id="39" src="w3tamil_wk_includes/images99/SEMICOLON.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_12"><img id="40" src="w3tamil_wk_includes/images99/QUOTE.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_13"><img id="41" src="w3tamil_wk_includes/images99/ENTER.gif" onclick="outW3Tamil(this)"width="56" height="38" alt="" style="cursor:default" /></span>
</div>
<div id="row_4">
<span id="key_4_1"><img id="42" src="w3tamil_wk_includes/images99/SHIFT.gif" width="76" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_2"><img id="43" src="w3tamil_wk_includes/images99/Z.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_3"><img id="44" src="w3tamil_wk_includes/images99/X.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_4"><img id="45" src="w3tamil_wk_includes/images99/C.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_5"><img id="46" src="w3tamil_wk_includes/images99/V.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_6"><img id="47" src="w3tamil_wk_includes/images99/B.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_7"><img id="48" src="w3tamil_wk_includes/images99/N.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_8"><img id="49" src="w3tamil_wk_includes/images99/M.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_9"><img id="50" src="w3tamil_wk_includes/images99/COMMA.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_10"><img id="51" src="w3tamil_wk_includes/images99/STOP.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_11"><img id="52" src="w3tamil_wk_includes/images99/SLASH.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_12"><img id="53" src="w3tamil_wk_includes/images99/SHIFT2.gif" width="77" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
你可以这样做，
在JS中：
function callKeyboard(){
var keyb=document.getElementById("keyboard_appear");
if(keyb.style.display=="none")
keyb.style.display="block";
else
keyb.style.display="none";
}
在HTML中：
在div的4行周围创建一个新的div，并给它一个id和样式，如下所示，
<div id="keyboard_appear" style="display:none">
调用js中定义的函数，这将使键盘出现在图像上，如果再次单击则会消失。
<img src="keyboard.png"alt="keyboard" onclick="callKeyboard()">
这个工作代码片段如下所示，
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="w3tamil_wk_includes/css/w3tamil_wk_style.css" />
</head>
<body>
<div id="keyboard_container">
<div id="keyboard" align="center">
<div id="keyboard_editor">
<form name="editorForm">
<!--<input type="text" name="editor" class="keyboardInput"onkeypress="return addCharKeyPress(this, event,engToTam);" onkeyDown="toggleLangMode(event);keyDownBorder(this);" onkeyup="keyUpBorder(this)"/> -->
<input type="text"name="editor" id="editor" onkeypress="return addCharKeyPress(this, event,engToTam);" onkeyDown="toggleLangMode(event);keyDownBorder(this);" onkeyup="keyUpBorder(this)"/>
<img src="keyboard.png"alt="keyboard" onclick="callKeyboard(this)">
<br />
</form>
</div>
<br/>
<br/>
<div id="keyboard_appear" style="display:none">
<div id="row_1">
<span id="key_1_1"><img id="1" src="w3tamil_wk_includes/images99/approx.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_2"><img id="2" src="w3tamil_wk_includes/images99/1.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_3_"><img id="3" src="w3tamil_wk_includes/images99/2.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_4"><img id="4" src="w3tamil_wk_includes/images99/3.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_5"><img id="5" src="w3tamil_wk_includes/images99/4.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_6"><img id="6" src="w3tamil_wk_includes/images99/5.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_7"><img id="7" src="w3tamil_wk_includes/images99/6.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_8"><img id="8" src="w3tamil_wk_includes/images99/7.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_9"><img id="9" src="w3tamil_wk_includes/images99/8.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_10"><img id="10" src="w3tamil_wk_includes/images99/9.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_11"><img id="11" src="w3tamil_wk_includes/images99/0.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_12"><img id="12" src="w3tamil_wk_includes/images99/minus.gif" width="39" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_13"><img id="13" src="w3tamil_wk_includes/images99/plus.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_1_14"><img id="14" src="w3tamil_wk_includes/images99/backspace.gif" onclick="back()"width="38" height="38" alt="" style="cursor:default" /></span>
</div>
<div id="row_2">
<span id="key_2_2"><img id="16" src="w3tamil_wk_includes/images99/Q.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_3"><img id="17" src="w3tamil_wk_includes/images99/W.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_4"><img id="18" src="w3tamil_wk_includes/images99/E.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_5"><img id="19" src="w3tamil_wk_includes/images99/R.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_6"><img id="20" src="w3tamil_wk_includes/images99/T.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_7"><img id="21" src="w3tamil_wk_includes/images99/Y.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_8"><img id="22" src="w3tamil_wk_includes/images99/U.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_9"><img id="23" src="w3tamil_wk_includes/images99/I.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_10"><img id="24" src="w3tamil_wk_includes/images99/O.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_11"><img id="25" src="w3tamil_wk_includes/images99/P.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_12"><img id="26" src="w3tamil_wk_includes/images99/BRACKET_START.gif" width="39" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_13"><img id="27" src="w3tamil_wk_includes/images99/BRACKET_END.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_14"><img id="28" src="w3tamil_wk_includes/images99/PIPE.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_2_1"><img id="15" src="w3tamil_wk_includes/images99/CLEAR.gif" onclick="Clear()"width="38" height="38" alt="" style="cursor:default" /></span>
</div>
<div id="row_3">
<span id="key_3_1"><img id="29" src="w3tamil_wk_includes/images99/CAPSLOCK.gif" width="59" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_2"><img id="30" src="w3tamil_wk_includes/images99/A.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_3"><img id="31" src="w3tamil_wk_includes/images99/S.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_4"><img id="32" src="w3tamil_wk_includes/images99/D.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_5"><img id="33" src="w3tamil_wk_includes/images99/F.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_6"><img id="34" src="w3tamil_wk_includes/images99/G.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_7"><img id="35" src="w3tamil_wk_includes/images99/H.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_8"><img id="36" src="w3tamil_wk_includes/images99/J.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_9"><img id="37" src="w3tamil_wk_includes/images99/K.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_10"><img id="38" src="w3tamil_wk_includes/images99/L.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_11"><img id="39" src="w3tamil_wk_includes/images99/SEMICOLON.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_12"><img id="40" src="w3tamil_wk_includes/images99/QUOTE.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_3_13"><img id="41" src="w3tamil_wk_includes/images99/ENTER.gif" onclick="outW3Tamil(this)"width="56" height="38" alt="" style="cursor:default" /></span>
</div>
<div id="row_4">
<span id="key_4_1"><img id="42" src="w3tamil_wk_includes/images99/SHIFT.gif" width="76" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_2"><img id="43" src="w3tamil_wk_includes/images99/Z.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_3"><img id="44" src="w3tamil_wk_includes/images99/X.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_4"><img id="45" src="w3tamil_wk_includes/images99/C.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_5"><img id="46" src="w3tamil_wk_includes/images99/V.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_6"><img id="47" src="w3tamil_wk_includes/images99/B.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_7"><img id="48" src="w3tamil_wk_includes/images99/N.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_8"><img id="49" src="w3tamil_wk_includes/images99/M.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_9"><img id="50" src="w3tamil_wk_includes/images99/COMMA.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_10"><img id="51" src="w3tamil_wk_includes/images99/STOP.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_11"><img id="52" src="w3tamil_wk_includes/images99/SLASH.gif" width="38" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
<span id="key_4_12"><img id="53" src="w3tamil_wk_includes/images99/SHIFT2.gif" width="77" height="38" alt="" onmouseover="overW3Tamil(this)" onmouseout="outW3Tamil(this)" onclick="addW3Tamil(this)" /></span>
</div>
</div>
</div>
</div>
<!-- w3TamilWK - Section 2 - END -->
<script>
function callKeyboard(){
var keyb=document.getElementById("keyboard_appear");
if(keyb.style.display=="none")
keyb.style.display="block";
else
keyb.style.display="none";
}
</script>
</body>
</html>