帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery虚拟键盘效果
jQuery虚拟键盘效果
浏览:700次
-
评论:0次
-
发布时间:2018-11-15
Html
Css
Js
#pwd { padding-right:55px; height:33px; width:720px; padding:0 10px; box-sizing:border-box; } #keyboard_Box,#keyboard_Box li { list-style:none; margin:0; padding:0; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } #keyboard_Box { width:720px; height:auto; border-radius:0.05em; display:none; box-sizing:border-box; background:#bed8d1; padding:12px; box-sizing:border-box; } #keyboard_Box li { position:relative; font-family:arial,"Vrinda"; width:45px; height:45px; line-height:45px; background-color:rgba(255,255,255,.8); border-radius:0.2em; font-weight:600; display:inline-block; text-align:center; font-size:26px; vertical-align:text-top; margin-right:0.4em; margin-bottom:10px; color:#266ada; box-shadow:0 0.2em 0.4em rgba(0,0,0,.5); cursor:pointer; position:relative; overflow:visible; text-shadow:-1px 1px 4px rgb(111,102,102); } #keyboard_Box li:active { box-shadow:inset 1px 1px 0 rgba(0,0,0,.5); top:0.08em; color:#da4026; background-color:rgba(8,148,243,0.63); } #keyboard_Box .com { width:130px; }
$("#keyboard_Box").html('
1
' + '
2
' + '
3
' + '
4
' + '
5
' + '
6
' + '
7
' + '
8
' + '
9
' + '
0
' + '
清空
' + '
q
' + '
w
' + '
e
' + '
r
' + '
t
' + '
y
' + '
u
' + '
i
' + '
o
' + '
p
' + '
←
' + '
a
' + '
s
' + '
d
' + '
f
' + '
g
' + '
h
' + '
j
' + '
k
' + '
l
' + '
z
' + '
转为大写
' + '
' + '
' + '
' + '
x
' + '
c
' + '
v
' + '
b
' + '
n
' + '
m
' + // '
'+ '') var attr = [] $("#keyboard_Box .list").on('click', function() { if ($("#pwd").val() == "") { $("#pwd").val("") attr = [] } var val = $(this).html() attr.push(val) for (var i = 0; i < attr.length; i++) { $("#pwd").val(attr) var s = $("#pwd").val() s = s.replace(/,/g, ''); $("#pwd").val(s) } }) $("#clear").on("click", function() { attr = [] $("#pwd").val(""); }) $("#").on("click", function() { var longnum = $("#pwd").val().length; var num; num = $("#pwd").val().substr(0, longnum - 1); $("#pwd").val(num); }) $("#shift").on("click", function() { setCapsLock("#shift") }) // 大小写 var CapsLockValue = 0 function setCapsLock(o) { if (CapsLockValue == 0) { CapsLockValue = 1; $(o).html("转化小写"); $.each($(".toLowerCase"), function(b, c) { $(c).html($(c).html().toUpperCase()); }); } else { CapsLockValue = 0; $(o).html("转化大写"); $.each($(".toLowerCase"), function(b, c) { $(c).html($(c).html().toLowerCase()); }); } }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>jQuery虚拟键盘效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:jQuery虚拟键盘,支持大小写转换
setcapslock(o) //大小写转换
jQuery实现购物车常规计算
鼠标悬停图片放大特效
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
700
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值