虚拟键盘功能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);

效果：