今天在CSDN中發現有一篇文章挺有意思 ,博文地址是:http://blog.csdn.net/java2000_net/article/details/6237169
特意轉載 ,文章版權歸原作者所有.下載源碼有點問題,我已改正,如下所示:
function _softkeyboard_(target,container){
var _ = _softkeyboard_;
_.target = target;
_.doc = container.ownerDocument;
(_.doc.parentWindow||_.doc.defaultView)._softkeyboard_ = _softkeyboard_;
_.skb = container;
_.skb.innerHTML = _.getkeyshtml();
var toggle = (_.skb.style.display == "block");
_.skb.style.display = toggle ? "none" : "block";
_.preventKey(target);
return toggle;
}
function closeKeyBoard()
{
document.getElementById('skb').style.display = "none";
}
_softkeyboard_.shifted = true;
_softkeyboard_.getkeyshtml = function(shifted){
var htm = [], keys = _softkeyboard_.shifted ?
["`1234567890-=","backspace","<br/>"," ","qwertyuiop[]//","<br/>"," "," ","asdfghjkl;","'","<br/>","shift","zxcvbnm,./","shift"] :
["~!@#$%^&*()_+","backspace","<br/>"," ","QWERTYUIOP{}|","<br/>"," "," ","ASDFGHJKL:",'"',"<br/>","shift","ZXCVBNM<>?","shift"];
var esp = {
"'":'<input type="button" value="/" onclick="_softkeyboard_.onkeydown(this);" />',
'"':"<input type='button' value='/' onclick='_softkeyboard_.onkeydown(this);' />",
"<br/>":"<br/>",
" ":" ",
"backspace":'<input type="button" value="<-" onclick="_softkeyboard_.backspace();" />',
"shift":'<input type="button" style="width:50px;" value="shift" onclick="_softkeyboard_.shifted=!_softkeyboard_.shifted;_softkeyboard_.skb.innerHTML = _softkeyboard_.getkeyshtml();" />'
};
for(var j = 0; j < keys.length; j++){
if(esp[keys[j]]){
htm.push(esp[keys[j]]);
}
else{
var x = new Date().getMilliseconds()%keys[j].length;
keys[j] = keys[j].substr(x,keys[j].length) + keys[j].substr(0,x);
for(var i = 0; i < keys[j].length; i++){
htm.push("<input type='button' class='key' value='"+ keys[j].charAt(i)+"' onclick='_softkeyboard_.onkeydown(this);' />");
}
}
}
htm.push("<div style= 'margin-top:5px;' mce_style='margin-top:5px;'><input type='button' onclick='closeKeyBoard()' value='确定' style='margin-right:20px;' mce_style='margin-right:20px;' /><input type='button' onclick='closeKeyBoard()' value='关闭' /><div/>");
return htm.join("");
}
_softkeyboard_.onkeydown = function(ele){
_softkeyboard_.target.value += ele.value;
_softkeyboard_.target.focus();
}
_softkeyboard_.backspace = function(){
with(_softkeyboard_.target){
value = value.substr(0,value.length-1);
}
}
_softkeyboard_.addCSSRule = function(key,value){}
_softkeyboard_.hide = function(){
if(_softkeyboard_.skb){
_softkeyboard_.skb.style.display = "none"
}
}
_softkeyboard_.preventKey = function(target){
var targetkeydown = function(e){
e = window.event?window.event:e;
switch(e.keyCode){
case 27:// esc
case 9:// tab
_softkeyboard_.hide();
if(window.event){e.returnValue = false;}else{e.preventDefault();}break;
}
};
// target.addEventListener ?
// target.addEventListener("keydown",targetkeydown,false)
// : target.attachEvent("onkeydown",targetkeydown);
}
window.top._softkeyboard_=_softkeyboard_;
_softkeyboard_.preventKey(window.top.document.body);
分享到:
相关推荐
本压缩包文件主要包含一个名为"软键盘.txt"的文本文件,可能包含了关于如何实现或使用JavaScript软键盘的相关代码、教程或者设计思路。 JavaScript软键盘的实现原理通常是通过HTML和CSS创建一个虚拟键盘界面,然后...
JavaScript软键盘是一种在网页上实现的安全输入解决方案,尤其适用于处理敏感信息,如用户密码或银行账号等。在传统的网页表单中,用户输入的内容可能会被键盘记录器截取,从而导致安全风险。JS软键盘通过在页面上...
js软键盘,支持中英文切换、大小写、标点符号,可拖动显示位置,支持不同表单元素响应是否显示软键盘,适用于一些触摸屏的网页版页面设计;内附demo示例。
JavaScript软键盘的主要目的是防止恶意程序通过监听物理键盘来窃取用户输入的敏感信息,如密码、信用卡号等。以下是对这个主题的详细解释: 1. **JavaScript基础**:JavaScript是一种脚本语言,广泛应用于Web浏览器...
JavaScript软键盘代码是一种在网页上实现输入控制的解决方案,尤其适用于移动设备,因为这些设备可能没有物理键盘。这种软键盘通常是由JavaScript动态生成并显示在屏幕上的,为用户提供输入文字的功能,常见于登录、...
JavaScript(简称JS)软键盘是一种在网页应用中常见的安全输入工具,主要应用于在线表单填写,尤其是涉及到敏感信息如密码、信用卡号等时,以防止恶意软件或键盘记录器窃取用户输入的数据。JS软键盘通常通过...
总的来说,VirtualKeyboard是一款强大且全面的JavaScript软键盘解决方案,它的多样性和可扩展性使得它在现代Web开发中具有广泛的应用前景。开发者可以根据实际需求,轻松地将它集成到自己的项目中,提升用户的输入...
总的来说,JS软键盘的实现涉及了JavaScript基础、DOM操作、事件处理、CSS样式和浏览器兼容性等多个方面。通过深入理解这些技术并结合具体应用场景,我们可以创建出满足各种需求的JS软键盘,提供流畅且安全的在线输入...
JavaScript软键盘是一种基于Web的虚拟输入工具,常用于网页表单填写,特别是在处理敏感信息如密码、信用卡号等时,为了提高安全性而替代系统默认的物理键盘。在本文中,我们将深入探讨JavaScript软键盘的工作原理、...
【标题】:“JS软键盘” 在网页开发中,由于安全性和隐私考虑,浏览器不允许JavaScript直接操作硬件设备,比如物理键盘。然而,为了在特定场景下(如移动设备、在线表单填写等)提供用户友好的交互体验,开发者可以...
4. dhkeyboard.js:这是软键盘的核心JavaScript文件,包含了软键盘的创建、显示、隐藏以及与页面元素交互的函数和事件处理程序。 5. dhlayer.js:可能是一个弹出层或者浮动层的库,用于控制软键盘的显示和隐藏,以及...
总的来说,这套JavaScript软键盘解决方案为Web开发者提供了方便快捷的输入方式,无论是在桌面还是移动设备上,都能提供良好的交互体验。对于那些对用户输入有特殊需求的项目,如金融、电商、教育等,这种自定义的软...
3. **JavaScript实现**:`SKB.js`虽然未在提供的文件列表中,但我们可以假设这是实现软键盘功能的关键。通过JavaScript,我们可以监听用户的点击事件,当用户点击某个按钮时,将相应的字符插入到输入框中。同时,还...
JavaScript软键盘是一种基于Web的虚拟输入工具,它允许用户在网页上通过JavaScript实现键盘功能,尤其适用于移动设备或在线表单填写场景,其中可能因为安全原因不允许直接输入文本。这个项目名为"VirtualKeyboard....
总的来说,民生银行的JS软键盘是保障用户在线交易安全的一种措施,利用JavaScript技术实现了虚拟键盘,有效地防止了键盘记录器等恶意软件对用户输入信息的窃取。同时,用户也需要了解并正确使用这种安全工具,以最大...
JavaScript(简称JS)软键盘是一种基于Web的输入解决方案,它被设计用于提高在线交易和敏感信息输入时的安全性。在银行和其他金融机构的网上服务中,传统键盘输入可能会面临键盘记录器等恶意软件的风险,而JS软键盘...
JavaScript(简称JS)软键盘是一种基于Web的输入解决方案,它允许用户在网页上进行文本输入,而无需依赖操作系统自带的物理键盘。这种技术对于移动设备、触摸屏应用或者需要增强安全性的网页表单尤其有用,因为它们...
在这个“css+div 大键盘支持+js软键盘输入”的项目中,我们主要探讨的是如何在触摸屏设备上为前端应用程序提供大键盘和软键盘输入功能。 首先,CSS和div是用于布局和样式设计的工具。Div元素在HTML中被广泛用来创建...
JavaScript(简称JS)软键盘是一种在网页应用中常见的交互元素,尤其在处理敏感信息如密码输入时,出于安全考虑,开发者常会选择使用软键盘代替系统自带的物理键盘。标题和描述提到的“js软键盘很好用”,这表明该...