`
谷熙亚
  • 浏览: 52701 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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();
分享到：
| Post注册
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js软键盘.js软键盘.js软键盘

    本压缩包文件主要包含一个名为"软键盘.txt"的文本文件，可能包含了关于如何实现或使用JavaScript软键盘的相关代码、教程或者设计思路。 JavaScript软键盘的实现原理通常是通过HTML和CSS创建一个虚拟键盘界面，然后...

    JS软键盘(javascript版本)

    JavaScript软键盘是一种在网页上实现的安全输入解决方案，尤其适用于处理敏感信息，如用户密码或银行账号等。在传统的网页表单中，用户输入的内容可能会被键盘记录器截取，从而导致安全风险。JS软键盘通过在页面上...

    javascript软键盘(虚拟键盘)

    js软键盘，支持中英文切换、大小写、标点符号，可拖动显示位置，支持不同表单元素响应是否显示软键盘，适用于一些触摸屏的网页版页面设计；内附demo示例。

    js 软键盘 软键盘（js）

    JavaScript软键盘的主要目的是防止恶意程序通过监听物理键盘来窃取用户输入的敏感信息，如密码、信用卡号等。以下是对这个主题的详细解释： 1. **JavaScript基础**：JavaScript是一种脚本语言，广泛应用于Web浏览器...

    JS软键盘代码

    JavaScript软键盘代码是一种在网页上实现输入控制的解决方案，尤其适用于移动设备，因为这些设备可能没有物理键盘。这种软键盘通常是由JavaScript动态生成并显示在屏幕上的，为用户提供输入文字的功能，常见于登录、...

    JS软键盘

    JavaScript（简称JS）软键盘是一种在网页应用中常见的安全输入工具，主要应用于在线表单填写，尤其是涉及到敏感信息如密码、信用卡号等时，以防止恶意软件或键盘记录器窃取用户输入的数据。JS软键盘通常通过...

    VirtualKeyboard强大的Js软键盘

    总的来说，VirtualKeyboard是一款强大且全面的JavaScript软键盘解决方案，它的多样性和可扩展性使得它在现代Web开发中具有广泛的应用前景。开发者可以根据实际需求，轻松地将它集成到自己的项目中，提升用户的输入...

    多款JS软键盘 及 常用JS兼容写法

    总的来说，JS软键盘的实现涉及了JavaScript基础、DOM操作、事件处理、CSS样式和浏览器兼容性等多个方面。通过深入理解这些技术并结合具体应用场景，我们可以创建出满足各种需求的JS软键盘，提供流畅且安全的在线输入...

    Javascript软键盘

    JavaScript软键盘是一种基于Web的虚拟输入工具，常用于网页表单填写，特别是在处理敏感信息如密码、信用卡号等时，为了提高安全性而替代系统默认的物理键盘。在本文中，我们将深入探讨JavaScript软键盘的工作原理、...

    js 软键盘

    【标题】：“JS软键盘” 在网页开发中，由于安全性和隐私考虑，浏览器不允许JavaScript直接操作硬件设备，比如物理键盘。然而，为了在特定场景下（如移动设备、在线表单填写等）提供用户友好的交互体验，开发者可以...

    好用的js 软键盘

    4. dhkeyboard.js：这是软键盘的核心JavaScript文件，包含了软键盘的创建、显示、隐藏以及与页面元素交互的函数和事件处理程序。 5. dhlayer.js：可能是一个弹出层或者浮动层的库，用于控制软键盘的显示和隐藏，以及...

    js软键盘，全键盘小键盘各一

    总的来说，这套JavaScript软键盘解决方案为Web开发者提供了方便快捷的输入方式，无论是在桌面还是移动设备上，都能提供良好的交互体验。对于那些对用户输入有特殊需求的项目，如金融、电商、教育等，这种自定义的软...

    类似于QQ的输入JS软键盘

    3. **JavaScript实现**：`SKB.js`虽然未在提供的文件列表中，但我们可以假设这是实现软键盘功能的关键。通过JavaScript，我们可以监听用户的点击事件，当用户点击某个按钮时，将相应的字符插入到输入框中。同时，还...

    js软键盘(含输入法)

    JavaScript软键盘是一种基于Web的虚拟输入工具，它允许用户在网页上通过JavaScript实现键盘功能，尤其适用于移动设备或在线表单填写场景，其中可能因为安全原因不允许直接输入文本。这个项目名为"VirtualKeyboard....

    民生银行-js软键盘

    总的来说，民生银行的JS软键盘是保障用户在线交易安全的一种措施，利用JavaScript技术实现了虚拟键盘，有效地防止了键盘记录器等恶意软件对用户输入信息的窃取。同时，用户也需要了解并正确使用这种安全工具，以最大...

    一款实用的js软键盘

    JavaScript（简称JS）软键盘是一种基于Web的输入解决方案，它被设计用于提高在线交易和敏感信息输入时的安全性。在银行和其他金融机构的网上服务中，传统键盘输入可能会面临键盘记录器等恶意软件的风险，而JS软键盘...

    js软键盘，支持多种语言，包括中文

    JavaScript（简称JS）软键盘是一种基于Web的输入解决方案，它允许用户在网页上进行文本输入，而无需依赖操作系统自带的物理键盘。这种技术对于移动设备、触摸屏应用或者需要增强安全性的网页表单尤其有用，因为它们...

    css+div 大键盘支持+js软键盘输入

    在这个“css+div 大键盘支持+js软键盘输入”的项目中，我们主要探讨的是如何在触摸屏设备上为前端应用程序提供大键盘和软键盘输入功能。 首先，CSS和div是用于布局和样式设计的工具。Div元素在HTML中被广泛用来创建...

    js软键盘很好用的

    JavaScript（简称JS）软键盘是一种在网页应用中常见的交互元素，尤其在处理敏感信息如密码输入时，出于安全考虑，开发者常会选择使用软键盘代替系统自带的物理键盘。标题和描述提到的“js软键盘很好用”，这表明该...

Magicbox
Global site tag (gtag.js) - Google Analytics