html代码
<!DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>pagination-nick
</
title
>
<
link
rel=
"stylesheet"
href=
"css/key.css"
>
</
head
>
<
body
>
<
div
class=
"key_plug"
>
<
div
class=
"small_key"
>
<
input
type=
"text"
class=
"keyboard"
autofocus=
""
placeholder=
"账号"
>
<
span
id=
"key_icon"
></
span
>
</
div
>
<
div
class=
"keys"
>
<
ul
class=
"key-contianer"
id=
"container"
>
<
li
class=
"symbol"
><
span
class=
"off"
>`
</
span
><
span
class=
"on"
>~
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>1
</
span
><
span
class=
"on"
>!
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>2
</
span
><
span
class=
"on"
>@
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>3
</
span
><
span
class=
"on"
>#
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>4
</
span
><
span
class=
"on"
>$
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>5
</
span
><
span
class=
"on"
>%
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>6
</
span
><
span
class=
"on"
>^
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>7
</
span
><
span
class=
"on"
>
&
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>8
</
span
><
span
class=
"on"
>*
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>9
</
span
><
span
class=
"on"
>(
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>0
</
span
><
span
class=
"on"
>)
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>-
</
span
><
span
class=
"on"
>_
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>=
</
span
><
span
class=
"on"
>+
</
span
></
li
>
<
li
class=
"delete lastitem"
>delete
</
li
>
<
li
class=
"tab"
>tab
</
li
>
<
li
class=
"letter"
>q
</
li
>
<
li
class=
"letter"
>w
</
li
>
<
li
class=
"letter"
>e
</
li
>
<
li
class=
"letter"
>r
</
li
>
<
li
class=
"letter"
>t
</
li
>
<
li
class=
"letter"
>y
</
li
>
<
li
class=
"letter"
>u
</
li
>
<
li
class=
"letter"
>i
</
li
>
<
li
class=
"letter"
>o
</
li
>
<
li
class=
"letter"
>p
</
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>[
</
span
><
span
class=
"on"
>{
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>]
</
span
><
span
class=
"on"
>}
</
span
></
li
>
<
li
class=
"symbol lastitem"
><
span
class=
"off"
>\
</
span
><
span
class=
"on"
>|
</
span
></
li
>
<
li
class=
"capslock"
>caps lock
</
li
>
<
li
class=
"letter"
>a
</
li
>
<
li
class=
"letter"
>s
</
li
>
<
li
class=
"letter"
>d
</
li
>
<
li
class=
"letter"
>f
</
li
>
<
li
class=
"letter"
>g
</
li
>
<
li
class=
"letter"
>h
</
li
>
<
li
class=
"letter"
>j
</
li
>
<
li
class=
"letter"
>k
</
li
>
<
li
class=
"letter"
>l
</
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>;
</
span
><
span
class=
"on"
>:
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>'
</
span
><
span
class=
"on"
>
"
</
span
></
li
>
<
li
class=
"return lastitem"
>return
</
li
>
<
li
class=
"left-shift"
>shift
</
li
>
<
li
class=
"letter"
>z
</
li
>
<
li
class=
"letter"
>x
</
li
>
<
li
class=
"letter"
>c
</
li
>
<
li
class=
"letter"
>v
</
li
>
<
li
class=
"letter"
>b
</
li
>
<
li
class=
"letter"
>n
</
li
>
<
li
class=
"letter"
>m
</
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>,
</
span
><
span
class=
"on"
>
<
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>.
</
span
><
span
class=
"on"
>
>
</
span
></
li
>
<
li
class=
"symbol"
><
span
class=
"off"
>/
</
span
><
span
class=
"on"
>?
</
span
></
li
>
<
li
class=
"right-shift lastitem"
>shift
</
li
>
<
li
class=
"space lastitem"
>
</
li
>
</
ul
>
</
div
>
</
div
>
<
script
src=
"lib/jquery/jquery-3.3.1.min.js"
>
<
/
script
>
<
script
src=
"js/key.js"
>
<
/
script
>
<
script
>
<
/
script
>
</
body
>
</
html
>
css代码
/* 键盘距离 */
.key_plug{
margin-top:
50px;
}
/* 隐藏 */
.temp_hidden{
display:
none;
}
/* 容器大小随意 居中处理*/
.key_plug .small_key{
width:
200px;
height:
100px;
margin:
0
auto;
}
/* 小键盘图标 */
.key_plug .small_key span{
display:
inline-block;
width:
20px;
height:
20px;
background:
url(
../img/key.png)
no-repeat;
}
/* 键盘外容器设定 */
.keys{
margin:
0
auto;
width:
700px;
border-radius:
3%;
box-shadow:
0
0
3px
rgba(
0,
0,
0,
0.9);
}
.key-contianer{
margin:
0;
padding:
0;
list-style:
none;
height:
235px;
width:
722px;
padding:
10px;
border-radius:
3%;
}
/* 键盘设定样式 */
.key-contianer li {
float:
left;
margin:
0
5px
5px
0;
width:
40px;
height:
40px;
line-height:
40px;
text-align:
center;
background:
#fff;
border:
1px
solid
#f9f9f9;
border-radius:
5px;
box-shadow:
0
0
3px
rgba(
0,
0,
0,
0.9);
}
.capslock, .tab, .left-shift {
clear:
left;
}
.key-contianer .tab, #keyboard .delete {
width:
70px;
}
.key-contianer .capslock {
width:
80px;
}
.key-contianer .return {
width:
77px;
}
.key-contianer .left-shift {
width:
95px;
}
.key-contianer .right-shift {
width:
107px;
}
.lastitem {
margin-right:
0;
}
.uppercase {
text-transform:
uppercase;
}
.key-contianer .space {
clear:
left;
width:
678px;
}
.key-contianer .delete{
width:
70px;
}
.on {
display:
none;
}
.key-contianer li:hover {
position:
relative;
top:
1px;
left:
1px;
border-color:
#e5e5e5;
cursor:
pointer;
}
js代码
;(
function(
$){
var
indexCtrl =
function(){
var
shift =
false;
var
capslock =
false;
//找到input文本框
var
keyUpdate=
function(){
$write=
$(
this);
}
//点击key小图标虚拟键盘进行隐藏或显示
var
keyToggle=
function(){
if (
$(
'.keys').
hasClass(
'temp_hidden')) {
$(
'.keys').
removeClass(
'temp_hidden');
}
else {
$(
'.keys').
addClass(
'temp_hidden');
}
}
//点击键盘按键的处理
var
keyOperate =
function(){
var
$this =
$(
this);
character =
$this.
html();
// 点击Shift键进行大小写的处理
if (
$this.
hasClass(
'left-shift') ||
$this.
hasClass(
'right-shift')) {
$(
'.letter').
toggleClass(
'uppercase');
$(
'.symbol span').
toggle();
shift = (
shift ===
true) ?
false :
true;
capslock =
false;
return
false;
}
// 点击Caps键进行大写锁定和解除大写锁定的处理
if (
$this.
hasClass(
'capslock')) {
$(
'.letter').
toggleClass(
'uppercase');
capslock =
true;
return
false;
}
// 点击Delete键进行删除处理
if (
$this.
hasClass(
'delete')) {
var
html =
$write.
val();
$write.
val(
html.
substr(
0,
html.
length -
1));
return
false;
}
// 特殊键的处理
if (
$this.
hasClass(
'symbol'))
character =
$(
'span:visible',
$this).
html();
if (
$this.
hasClass(
'space'))
character =
' ';
if (
$this.
hasClass(
'tab'))
character =
"
\t
";
if (
$this.
hasClass(
'return'))
character =
"
\n
";
// Uppercase letter
if (
$this.
hasClass(
'uppercase'))
character =
character.
toUpperCase();
// Remove shift once a key is clicked.
if (
shift ===
true) {
$(
'.symbol span').
toggle();
if (
capslock ===
false)
$(
'.letter').
toggleClass(
'uppercase');
shift =
false;
}
// 点击后的字符拼接
$write.
val(
$write.
val()+
character);
}
var
loadEvent=
function(){
$(
'.keyboard').
bind(
"click",
keyUpdate);
$(
"#key_icon").
bind(
"click",
keyToggle);
$(
"#container li").
bind(
"click",
keyOperate);
}
return{
init
:
function(){
loadEvent();
}
}
}();
indexCtrl.
init();
})(
jQuery);
效果：
