jquery实现页面虚拟键盘特效_jquery
程序员文章站
2022-03-10 10:07:42
...
用法简介：
');
//document.write ('--------------------------------------------');
//document.write (' ------字母----');
document.write (' ');
//document.write ('--------------------------------------------');
document.write ('
jquery页面虚拟键盘设计带有数字与字母切换功能。
文件引用：
//给输入的密码框添加新值
function addValue(newValue)
{
CapsLockValue==0?$(".input_cur").val($(".shuru").val()+ newValue):$(".input_cur").val($(".shuru").val()+ newValue.toUpperCase())
}
//清空
function clearValue()
{
$(".input_cur").val("");
}
//实现BackSpace键的功能
function backspace()
{
var longnum=$(".input_cur").val().length;
var num ;
num=$(".input_cur").val().substr(0,longnum-1);
$(".input_cur").val(num);
}
function changePanl(oj){
$("#"+oj).siblings("div").hide();
$("#"+oj).show();
}
//设置是否大写的值
function setCapsLock(o)
{
if (CapsLockValue==0){
CapsLockValue=1;
$(o).val("转化小写");
$.each($(".i_button_zm"),function(b, c) {
$(c).val($(c).val().toUpperCase());
});
}else{
CapsLockValue=0;
$(o).val("转化大写");
$.each($(".i_button_zm"),function(b, c) {
$(c).val($(c).val().toLowerCase());
});
}
}
window.onload=function(){
// changePanl("zimu");
}
CSS
.softkeyboard{ display:inline-block;}
.softkeyboard td{ padding:4px;}
.c_panel{ background-color:#333; text-align:center; padding:15px;}
.input_cur{ border:1px solid #f00;}
.i_button{ border:none; height:40px; width:50px; font-size:16px; font-family:"微软雅黑"; background-color:#666; color:#fff;}
.i_button:active{ background-color:#999;}
.i_button_num{}
.i_button_btn{ float:right; width:88px;}
.i_button_bs{ float:right; width:148px;}
HTML
上一篇： 对js关键字命名的疑问介绍_基础知识