js软键盘

原创 2015年07月07日 15:01:52
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();

Javascript实现的软键盘,效果不错

Javascript实现的软键盘,效果不错
  • java2000_net
  • java2000_net
  • 2011年03月10日 13:44
  • 6416

js实现软键盘(兼容所有浏览器)

效果图如下: 代码如下:
  • xuweilinjijis
  • xuweilinjijis
  • 2013年03月18日 15:05
  • 5471

js虚拟软键盘

功能强大的JS虚拟键盘 最近做项目,我负责做网页前端,客户需要利用触摸屏进行操作,不外接鼠标键盘,但要求能录入文字,包括数字,英文,中文。思考了一下,决定用JS实现虚拟键盘。 ...
  • jr_soft
  • jr_soft
  • 2014年09月12日 12:10
  • 1306

js判断单击软键盘的“完成”按钮

转载地址:http://www.jianshu.com/p/e5d33721595d 最近公司有一个项目,要在页面中有一个搜索框,输入内容,单击软键盘上的搜索或完成来运行函数; 开始在想,有...
  • zhanlai_wei
  • zhanlai_wei
  • 2017年07月12日 18:54
  • 347

H5页面关闭软键盘

H5页面关闭软键盘
  • songchunmin_
  • songchunmin_
  • 2016年07月04日 17:05
  • 13646

JS实现自定义简单网页软键盘效果代码

自写一个简单点的网页软键盘 * { padding:0; margin:0; } body { background:#fff; } th, ...
  • paj123456789
  • paj123456789
  • 2017年07月20日 11:01
  • 400

JS 开启 win10 触屏键盘

1. 编辑注册表导入文件: tabkey.reg         Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\tab...
  • cnmqw
  • cnmqw
  • 2017年02月03日 01:31
  • 784

javascript检查android软键盘隐藏显示

javascript如何检查当输入框获取焦点弹出android软键盘时,如果点击的是键盘上的隐藏按钮隐藏键盘时,如何捕获点击隐藏按钮事件。 javascript检查android软键盘隐藏显...
  • macwhirr123
  • macwhirr123
  • 2016年07月27日 14:15
  • 1322

【手机UI】搜索输入框,呼出软键盘时右下角为搜索按钮,并使用js发送请求

搜索 window.onload = function(){ document.getElementById("J_search_artical").onsubmit ...
  • snow_finland
  • snow_finland
  • 2017年04月20日 18:15
  • 1417

完美解决 手机软键盘遮挡问题

遇到的问题 同事的项目在做登陆的时候遇到个问题,就是弹出软键盘把按钮遮挡了。网上好多方法 试了一遍效果都不好。  那么我们该如何解决这个问题呢? 解决思路 弄个scrollview...
  • u014045181
  • u014045181
  • 2016年04月11日 09:22
  • 1214
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js软键盘
举报原因:
原因补充:

(最多只允许输入30个字)