虚拟键盘功能js

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);


效果:

虚拟键盘功能js_第1张图片


你可能感兴趣的:(小功能总结)