虚拟键盘软键盘js插件

最新推荐文章于 2024-04-15 09:34:47 发布

白大仙儿

最新推荐文章于 2024-04-15 09:34:47 发布

阅读量805

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_45747808/article/details/102648374

版权

HTML代码

<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

 
<div id="container">
	<textarea id="write" rows="6" cols="60"></textarea>
	<ul id="keyboard">
		<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">&amp;</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">&quot;</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">&lt;</span></li>
		<li class="symbol"><span class="off">.</span><span class="on">&gt;</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">&nbsp;</li>
	</ul>
</div>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="keyboard.js"></script>


</body>

jQuery代码

/*
 * jQuery JavaScript Library v1.3.2
 * http://jquery.com/
 *
 * Copyright (c) 2009 John Resig
 * Dual licensed under the MIT and GPL licenses.
 * http://docs.jquery.com/License
 *
 * Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009)
 * Revision: 6246
 */
(function(){
   var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){
   return new o.fn.init(E,F)},D=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=/^.[^:#\[\.,]*$/;o.fn=o.prototype={
   init:function(E,H){
   E=E||document;if(E.nodeType){
   this[0]=E;this.length=1;this.context=E;return this}if(typeof E==="string"){
   var G=D.exec(E);if(G&&(G[1]||!H)){
   if(G[1]){
   E=o.clean([G[1]],H)}else{
   var I=document.getElementById(G[3]);if(I&&I.id!=G[3]){
   return o().find(E)}var F=o(I||[]);F.context=document;F.selector=E;return F}}else{
   return o(H).find(E)}}else{
   if(o.isFunction(E)){
   return o(document).ready(E)}}if(E.selector&&E.context){
   this.selector=E.selector;this.context=E.context}return this.setArray(o.isArray(E)?E:o.makeArray(E))},selector:"",jquery:"1.3.2",size:function(){
   return this.length},get:function(E){
   return E===g?Array.prototype.slice.call(this):this[E]},pushStack:function(F,H,E){
   var G=o(F);G.prevObject=this;G.context=this.context;if(H==="find"){
   G.selector=this.selector+(this.selector?" ":"")+E}else{
   if(H){
   G.selector=this.selector+"."+H+"("+E+")"}}return G},setArray:function(E){
   this.length=0;Array.prototype.push.apply(this,E);return this},each:function(F,E){
   return o.each(this,F,E)},index:function(E){
   return o.inArray(E&&E.jquery?E[0]:E,this)},attr:function(F,H,G){
   var E=F;if(typeof F==="string"){
   if(H===g){
   return this[0]&&o[G||"attr"](this[0],F)}else{
   E={
   };E[F]=H}}return this.each(function(I){
   for(F in E){
   o.attr(G?this.style:this,F,o.prop(this,E[F],G,I,F))}})},css:function(E,F){
   if((E=="width"||E=="height")&&parseFloat(F)<0){
   F=g}return this.attr(E,F,"curCSS")},text:function(F){
   if(typeof F!=="object"&&F!=null){
   return this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(F))}var E="";o.each(F||this,function(){
   o.each(this.childNodes,function(){
   if(this.nodeType!=8){
   E+=this.nodeType!=1?this.nodeValue:o.fn.text([this])}})});return E},wrapAll:function(E){
   if(this[0]){
   var F=o(E,this[0].ownerDocument).clone();if(this[0].parentNode){
   F.insertBefore(this[0])}F.map(function(){
   var G=this;while(G.firstChild){
   G=G.firstChild}return G}).append(this)}return this},wrapInner:function(E){
   return this.each(function(){
   o(this).contents().wrapAll(E)})},wrap:function(E){
   return this.each(function(){
   o(this).wrapAll(E)})},append:function(){
   return this.domManip(arguments,true,function(E){
   if(this.nodeType==1){
   this.appendChild(E)}})},prepend:function(){
   return this.domManip(arguments,true,function(E){
   if(this.nodeType==1){
   this.insertBefore(E,this.firstChild)}})},before:function(){
   return this.domManip(arguments,false,function(E){
   this.parentNode.insertBefore(E,this)})},after:function(){
   return this.domManip(arguments,false,function(E){
   this.parentNode.insertBefore(E,this.nextSibling)})},end:function(){
   return this.prevObject||o([])},push:[].push,sort:[].sort,splice:[].splice,find:function(E){
   if(this.length===1){
   var F=this.pushStack([],"find",E);F.length=0;o.find(E,this[0],F);return F}else{
   return this.pushStack(o.unique(o.map(this,function(G){
   return o.find(E,G)})),"find",E)}},clone:function(G){
   var E=this.map(function(){
   if(!o.support.noCloneEvent&&!o.isXMLDoc(this)){
   var I=this.outerHTML;if(!I){
   var J=this.ownerDocument.createElement("div");J.appendChild(this.cloneNode(true));I=J.innerHTML}return o.clean([I.replace(/ jQuery\d+="(?:\d+|null)"/g,"").replace(/^\s*/,"")])[0]}else{
   return this.cloneNode(true)}});if(G===true){
   var H=this.find("*").andSelf(),F=0;E.find("*").andSelf().each(function(){
   if(this.nodeName!==H[F].nodeName){
   return}var I=o.data(H[F],"events");for(var K in I){
   for(var J in I[K]){
   o.event.add(this,K,I[K][J],I[K][J].data)}}F++})}return E},filter:function(E){
   return this.pushStack(o.isFunction(E)&&o.grep(this,function(G,F){
   return E.call(G,F)})||o.multiFilter(E,o.grep(this,function(F){
   return F.nodeType===1})),"filter",E)},closest:function(E){
   var G=o.expr.match.POS.test(E)?o(E):null,F=0;return this.map(function(){
   var H=this;while(H&&H.ownerDocument){
   if(G?G.index(H)>-1:o(H).is(E)){
   o.data(H,"closest",F);return H}H=H.parentNode;F++}})},not:function(E){
   if(typeof E==="string"){
   if(f.test(E)){
   return this.pushStack(o.multiFilter(E,this,true),"not",E)}else{
   E=o.multiFilter(E,this)}}var F=E.length&&E[E.length-1]!==g&&!E.nodeType;return this.filter(function(){
   return F?o.inArray(this,E)<0:this!=E})},add:function(E){
   return this.pushStack(o.unique(o.merge(this.get(),typeof E==="string"?o(E):o.makeArray(E))))},is:function(E){
   return !!E&&o.multiFilter(E,this).length>0},hasClass:function(E){
   return !!E&&this.is("."+E)},val:function(K){
   if(K===g){
   var E=this[0];if(E){
   if(o.nodeName(E,"option")){
   return(E.attributes.value||{
   }).specified?E.value:E.text}if(o.nodeName(E,"select")){
   var I=E.selectedIndex,L=[],M=E.options,H=E.type=="select-one";if(I<0){
   return null}for(var F=H?I:0,J=H?I+1:M.length;F<J;F++){
   var G=M[F];if(G.selected){
   K=o

最低0.47元/天解锁文章

白大仙儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
虚拟键盘软键盘js插件

HTML代码<link rel="stylesheet" type="text/css" href="style.css" /></head><body> <div id="container"> <textarea id="write" rows="6" cols="60"></textarea> <...
复制链接

扫一扫