js软键盘

javascript
转载他人：效果待定

//定义当前是否大写的状态
var CapsLockValue=0;
var InputControlID = "";
var UILang = "CN";
var old_onscroll_event=null;
var old_onresize_event=null;

function create_keyboard()
{
var div_str = "";

div_str += ('<DIV align="center" id="softkeyboard" name="softkeyboard" style="position:absolute; left:0px; top:0px; width:517px; z-index:180;display:none">');
div_str +=  ('<FORM name="Calc" action="" method="post" autocomplete="off">');
div_str +=  ('<INPUT type="hidden" value="ok" name="action2">');
div_str +=  ('<table width="348" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#FF9900">');
div_str +=  ('<tr>');
div_str +=  ('<td align="left" bgcolor="#FF9900" align="center">');
div_str +=  ('<INPUT type="button" value="重新输入" name="reset_input" onclick="ResetInput()">');
div_str +=  ('<input name="showCapsLockValue" type="button"  onClick="setCapsLock();"  value="当前是小写">');
div_str +=  ('<input type="button" value="关闭" name="close_key" onclick="closekeyboard();"></td>');

div_str +=  ('</tr>');
div_str +=  ('<tr> ');
div_str +=  ('<td align="center" bgcolor="#FFFFFF" align="center"> <table align="center" width="98%" border="0" cellspacing="0" cellpadding="0">');
div_str +=  ('<tr align="left" valign="middle">');
div_str +=  ('<td><input type="button" onclick="addValue(\'1\');" value=" 1 "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'2\');" value=" 2 "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'3\');" value=" 3 "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'4\');" value=" 4 "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'5\');" value=" 5 "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'6\');" value=" 6 "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'7\');" value=" 7 "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'8\');" value=" 8 "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'9\');" value=" 9 "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'0\');" value=" 0 "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'-\');" value=" - "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'_\');" value=" _ "></td>');
div_str +=  ('<td colspan=3><input type="button" value="BackSpace" onclick="setpassvalue();"></td>');
div_str +=  ('</tr>');
div_str +=  ('<tr align="left" valign="middle">');
div_str +=  ('<td><input type="button" onclick="addValue(\'q\');" value=" q "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'w\');" value=" w "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'e\');" value=" e "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'r\');" value=" r "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'t\');" value=" t "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'y\');" value=" y "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'u\');" value=" u "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'i\');" value=" i "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'o\');" value=" o "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'p\');" value=" p "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\':\');" value=" : "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\';\');" value=" ; "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'`\');" value=" ` "></td>');
div_str +=  ('<td colspan=2><input type="button" onclick="closekeyboard();" value=" Enter"></td>');
div_str +=  ('</tr>');
div_str +=  ('<tr align="left" valign="middle">');
div_str +=  ('<td><input type="button" onclick="addValue(\'a\');" value=" a "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'s\');" value=" s "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'d\');" value=" d "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'f\');" value=" f "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'g\');" value=" g "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'h\');" value=" h "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'j\');" value=" j "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'k\');" value=" k "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'l\');" value=" l "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'[\');" value=" [ "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\']\');" value=" ] "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'{\');" value=" { "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'&\');" value=" & "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'+\');" value=" + "></td>');
div_str +=  ('<td></td>');
div_str +=  ('</tr>');
div_str +=  ('<tr align="left" valign="middle">');
div_str +=  ('<td><input type="button" onclick="addValue(\'z\');" value=" z "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'x\');" value=" x "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'c\');" value=" c "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'v\');" value=" v "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'b\');" value=" b "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'n\');" value=" n "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'m\');" value=" m "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'<\');" value=" < "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'>\');" value=" > "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'(\');" value=" ( "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\')\');" value=" ) "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'}\');" value=" } "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'\\x27\');" value=" \' "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'\\x22\');" value=\' " \'></td>');
div_str +=  ('<td></td>');
div_str +=  ('</tr>');
div_str +=  ('<tr align="left" valign="middle">');
div_str +=  ('<td><input type="button" onClick="addValue(\',\');" value=" , "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'~\');" value=" ~ "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'!\');" value=" ! "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'@\');" value=" @ "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'#\');" value=" # "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'$\');" value=" $ "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'%\');" value=" % "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'^\');" value=" ^ "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'*\');" value=" * "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'|\');" value=" | "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'?\');" value=" ? "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'\/\');" value=" \/ "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'\\x5c\');" value=" \\ "></td>');
div_str +=  ('<td><input type="button" onclick="addValue(\'.\');" value=" . "></td>');
div_str +=  ('<td><input type="button" onClick="addValue(\'=\');" value=" = "></td>');
div_str +=  ('</tr>');
div_str +=  ('</table></td>');
div_str +=  ('</tr>');
div_str +=  ('</table>');
div_str +=  ('</FORM>');
div_str +=  ('</DIV>');

document.write(div_str);
}

//给输入的密码框添加新值
function addValue(newValue)
{
var obj = document.getElementById(InputControlID);
if (CapsLockValue==0)
{
obj.value += newValue;
}
else
{
obj.value += newValue.toUpperCase();
}
}
//实现BackSpace键的功能
function setpassvalue()
{
var obj = document.getElementById(InputControlID);
var longnum=obj.value.length;
obj.value=obj.value.substr(0,longnum-1);
}
//
function ResetInput()
{
var obj = document.getElementById(InputControlID);
obj.value="";
}
//关闭软键盘
function closekeyboard()
{
var softkeyboard = document.getElementById("softkeyboard");
softkeyboard.style.display="none";
window.onscroll=old_onscroll_event;
window.onresize=old_onresize_event;
}

//显示软键盘
function showkeyboard(input,lang)
{
InputControlID = input;
if(lang == "EN")
{
document.Calc.reset_input.value="Reset Input";
document.Calc.close_key.value="Close";
document.Calc.showCapsLockValue.value="Lower Case";
UILang = lang;
}
var softkeyboard = document.getElementById("softkeyboard");
softkeyboard.style.display="block";

scroll_keyboard();
scroll_keyboard();

if(window.onscroll != scroll_keyboard)
{
old_onscroll_event = window.onscroll;
}
if(window.onresize != scroll_keyboard)
{
old_onresize_event = window.onresize;
}
window.onscroll=scroll_keyboard;
window.onresize=scroll_keyboard;
}
//设置是否大写的值
function setCapsLock()
{
if (CapsLockValue==0)
{
CapsLockValue=1
if(UILang == "CN")
{
document.Calc.showCapsLockValue.value="当前是大写 ";
}
else
{
document.Calc.showCapsLockValue.value="Upper Case ";
}
}
else
{
CapsLockValue=0
if(UILang == "CN")
{
document.Calc.showCapsLockValue.value="当前是小写 ";
}
else
{
document.Calc.showCapsLockValue.value="Lower Case ";
}
}
}

function scroll_keyboard()
{
var obj = document.getElementById("softkeyboard");
obj.style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-obj.offsetHeight)+"px";
obj.style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-obj.offsetWidth)+"px";
}

create_keyboard();