Главная » 2010 » Июнь » 14 » Экранная клавиатура на русском языке (Javascript)
14.06.2010, 09:31

Экранная клавиатура на русском языке



Виртуальная клавиатура с русской раскладкой. Ее свободно можно перемещать по экрану монитора посредством мыши.

В body ставим это:

Code
<FORM name="Keyboard" id="Keyboard">
<input type="text" id="inp1" name="inp1" size=46><br>
<input type="text" id="inp2" name="inp2" size=46><br>
<textarea id="inp3" name="inp3" cols=35 rows=6 wrap=physical></textarea>
</FORM>

<a href="javascript:showKB()">Virtual Keyboard</a>
<img src="ru1.png" style="position:absolute; top:220; left:10; cursor:pointer" id="kb" >

<script type="text/javascript" >

/***************************************
* Script: virtual keyboard russia v1 *
* Author: Nikolai Zimfer *
* Copyright: © 2004 by www.zimfer.de *
* private, not commercial: free *
***************************************/

var ie4=document.getElementById && document.all;
var ns6=document.getElementById &&!document.all;
aElem = new Array();
k=0;

ru1=new Image(); ru1.src="ru1.png";
ru2=new Image(); ru2.src="ru2.png";

aRu1 = new Array (1105,49,50,51,52,53,54,55,56,57,48,45,61, 1081,1094,1091,1082,1077,1085,1075,1096,1097,1079,1093,1098, 1092,1099,1074,1072,1087,1088,1086,1083,1076,1078,1101,92, 60,1103,1095,1089,1084,1080,1090,1100,1073,1102,46, 64,36,8364,165,35, 32, 38,124,37,167,126 );
aRu2 = new Array (1025,33,34,8470,59,37,58,63,42,40,41,95,43, 1049,1062,1059,1050,1045,1053,1043,1064,1065,1047,1061,1066, 1060,1067,1042,1040,1055,1056,1054,1051,1044,1046,1069,47, 62,1071,1063,1057,1052,1048,1058,1068,1041,1070,44, 169,174,8482,105,247, 32, 123,125,91,93,177 );

initElem();

document.onmousedown = down;
document.onmouseup = up;

function down(e)
{ if(ie4) objId=window.event.srcElement.id;
if(ns6) objId=e.target.id;

for (i=0; i<aElem.length; i++)
{ if (objId==aElem[i]) document.getElementById("kb").title = objId;
}

if (objId=="kb")
{ if(ie4) { xx=parseInt(document.getElementById(objId).style.left)-event.clientX;
yy=parseInt(document.getElementById(objId).style.top)-event.clientY;
x = event.offsetX;
y = event.offsetY;
id = coords(x,y);
write1(id);
}
if(ns6) { xx=parseInt(document.getElementById(objId).style.left)-e.clientX;
yy=parseInt(document.getElementById(objId).style.top)-e.clientY;
x = e.layerX;
y = e.layerY;
id = coords(x,y);
write2(id,e);
}
document.onmousemove = move;
}
return false;
}
function up(e)
{ tit = document.getElementById("kb").title;
if(tit=="") inp=aElem[0];
else inp=tit;
document.getElementById(inp).focus();
document.onmousemove = null;
return false;
}
function move(e)
{ if (ie4){ document.getElementById(objId).style.left= xx+event.clientX;
document.getElementById(objId).style.top = yy+event.clientY;
}
if (ns6){ document.getElementById(objId).style.left= xx+e.clientX;
document.getElementById(objId).style.top = yy+e.clientY;
}
return false;
}

// ======================================================================

function initElem()
{ for (i=0; i<document.forms.length; i++)
{ for (j=0; j<document.forms[i].elements.length; j++)
{ eType = document.forms[i].elements[j].type;
if(eType=="text" || eType=="textarea")
aElem[k]=document.forms[i].elements[j].name; //.id nur fuer IE
k++;
}
}
}

function showKB()
{ document.getElementById("kb").style.visibility = 'visible';
}
function coords(x,y)
{ if(y>=0 && y<20 && x<175) id="xxx";
if(y>=0 && y<20 && x>=175 && x<280) id="link";
if(y>=0 && y<20 && x>=280) id="hidden";

if(y>=20 && y<40)
{ if(x<260) id=(x-x%20)/20;
if(x>=260) id="bs";
}
if(y>=40 && y<60)
{ if(x<30) id="tab";
if(x>=30) id=13+(x-30-(x-30)%20)/20;
if(x>=270) id="del";
}
if(y>=60 && y<80)
{ if(x<35) id="caps";
if(x>=35) id=25+(x-35-(x-35)%20)/20;
if(x>=275) id="enter";
}
if(y>=80 && y<100)
{ if(x<25) id="shift";
if(x>=25) id=37+(x-25-(x-25)%20)/20;
if(x>=245) id="shift";
}
if(y>=100)
{ if(x<100) id=48+(x-x%20)/20;
if(x>=100) id=53;
if(x>=200) id=54+(x-200-(x-200)%20)/20;
}
return id;
}

function write1(id)
{ tit = document.getElementById("kb").title;
if(tit=="") inp=aElem[0];
else inp=tit;
document.getElementById(inp).focus();
curselection = document.selection.createRange();

if(id=="hidden")// OFF
document.getElementById("kb").style.visibility = 'hidden';

if(id=="tab") // TABULATOR
{ if (document.getElementById(inp).type !="textarea") return false;
curselection.text='\t';
}
if(id=="enter") // ENTER
{ if (document.getElementById(inp).type !="textarea") return false;
curselection.text='\n';
}
if(id=="bs") // BACKSPACE
{ if ( curselection.text =='') curselection.moveStart('character',-1);
curselection.text='';
}
if(id=="del") // DELETE
{ if(curselection.text =='') curselection.moveEnd('character',1);
curselection.text='';
curselection.collapse(false);
}
if(id=="link") // LINK
window.location.href ="http://www.zimfer.de";

if(id=="shift") // SHIFT
{ kbimg = document.getElementById("kb").src;
if(kbimg.search(/ru1.+/)!=-1 ) document.getElementById("kb").src = ru2.src;
if(kbimg.search(/ru2.+/)!=-1 ) document.getElementById("kb").src = ru1.src;
}

if(!isNaN(id)) // CHARACTER
{ kbimg = document.getElementById("kb").src;
if(kbimg.search(/ru1.+/)!=-1 ) curselection.text = String.fromCharCode(aRu1[id]);
if(kbimg.search(/ru2.+/)!=-1 ) curselection.text = String.fromCharCode(aRu2[id]);
}
curselection.select();
curselection.parentElement().focus();
return false;
}
function write2(id,e)
{ tit = document.getElementById("kb").title;
if(tit=="") inp=aElem[0];
if(tit!="") inp=tit;
document.getElementById(inp).focus();

if(id=="hidden")// OFF
document.getElementById("kb").style.visibility = 'hidden';

if(id=="tab") // TABULATOR
{ if (document.getElementById(inp).type !="textarea") return false;
document.getElementById(inp).value = document.getElementById(inp).value + '\t';
}
if(id=="enter") // ENTER
{ if (document.getElementById(inp).type !="textarea") return false;
document.getElementById(inp).value = document.getElementById(inp).value + '\n';
}
if(id=="bs") // BACKSPACE
document.getElementById(inp).value = document.getElementById(inp).value.slice (0,document.getElementById(inp).value.length-1);

if(id=="del") // DELETE
document.getElementById(inp).value = document.getElementById(inp).value.slice (0,document.getElementById(inp).value.length-1);

if(id=="link") // LINK
window.location.href ="http://www.zimfer.de";

if(id=="shift") // SHIFT
{ kbimg = document.getElementById("kb").src;
if(kbimg.search(/ru1.+/)!=-1 ) document.getElementById("kb").src = ru2.src;
if(kbimg.search(/ru2.+/)!=-1 ) document.getElementById("kb").src = ru1.src;
}

if(!isNaN(id)) // CHARACTER
{ kbimg = document.getElementById("kb").src;
if(kbimg.search(/ru1.+/)!=-1 ) document.getElementById(inp).value = document.getElementById(inp).value + String.fromCharCode(aRu1[id]);
if(kbimg.search(/ru2.+/)!=-1 ) document.getElementById(inp).value = document.getElementById(inp).value + String.fromCharCode(aRu2[id]);
}
return false;
}
</script>

Заливаем файлы ru1.png и ru2.png в корень сайта.

Материал взят с сайта infoscript.ru
Теги: Скачать Экранная клавиатура на русском языке
Скачать "Экранная клавиатура на русском языке"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Nikolai Zimfer
Категория: JavaScript's | Просмотров: 5362 | Добавил: antisept | Рейтинг: 4.0/2 |
Теги: русском, клавиатура, экранная, На, языке
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]