js虚拟键盘

最新推荐文章于 2024-04-23 09:34:00 发布
最新推荐文章于 2024-04-23 09:34:00 发布
阅读量386 收藏 4
点赞数 3
分类专栏： JavaScript js Jscript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45746635/article/details/102653408
版权

js网页输入虚拟键盘

今天给大家带来的是一个网页版的虚拟键盘的制作

过程有点复杂，写的时候我也是不太理解，代码有点多

不过呢，最终还是写出来了

就拿出来看能不能骗点访客量，

先上图，看效果

在这里插入图片描述这是运行出来的效果图，感觉还可以，简单的功能还是能实现的

再给分享一个可能有用的图片吧
在这里插入图片描述
这是做这个项目所有的目录结构

接下来就是代码了，注意保存（CV）
首先是HTM的代码：：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--jquery的路径-->
    <script src="jquery.js"></script>

    <!--keyboard的路径-->
    <script src="keyboard.js"></script>

    <!--style的路径-->
    <link rel="stylesheet" type="text/css" href="style.css"/>

    <style>
        #write{
   
            width: 700px;
            height: 200px;
            background-color: aqua;
        }

        #container{
   
            background-color: lightslategray;
            width:700px;
            height: 250px;
        }

        #keyboard{
   
            padding-top: 10px;
            padding-left: 8px;
        }

    </style>


</head>
<body>
<br><br><br>
<center><h2>网页输入虚拟键盘</h2></center>
<br><br><br>
<center><textarea id="write" rows="6" cols="60"></textarea></center>

<div id="container">
    <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">空格</li>
    </ul>
</div>
</body>
</html>

接下来是CSS的代码：：
这些代码都可以直接拿去用的，

@charset "utf-8";
* {
   
    margin: 0;
    padding: 0;
    font-family: 'Microsoft Yahei';
}

body {
   
    background: #eee;
    font-size: 16px;
}

/* container */
#container {
   
    margin: 100px auto;
    width: 688px;
}

#write {
   
    margin: 0 0 5px;
    padding: 5px;
    width: 671px;
    height: 200px;
    font-size: 16px;
    background: #fff;
    border: 1px solid #f9f9f9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#keyboard {
   
    margin: 0;
    padding: 0;
    list-style: none;
}

#keyboard li {
   
    float: left;
    margin: 0 5px 5px 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #f9f9f9;
    cursor: pointer;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#keyboard li:hover {
   
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #e5e5e5;
    background: #FFF1C2;
}

.capslock, .tab, .left-shift {
   
    clear: left;
}

#keyboard .tab, #keyboard .delete {
   
    width: 70px;
}

#keyboard .capslock {
   
    width: 80px;
}

#keyboard .return {
   
    width: 77px;
}

#keyboard .left-shift {
   
    width: 95px;
}

#keyboard .right-shift {
   
    width: 109px;
}

.lastitem {
   
    margin-right: 0;
}

.uppercase {
   
    text-transform: uppercase;
}

#keyboard .space {
   
    clear: left;
    width: 681px;
}

.on {
   
    display: none;
}

下面就是最重要的JS代码段了：：

$(function () {
   
    var $write = $('#write'),
        shift = false,
        capslock = false;
    $('#keyboard li').click(function () {
   
        var $this = $(this),
            character = $this.html();

        // shift是否被点击
        if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
   
            //更换class值
            $('.letter').toggleClass('uppercase');
            //隐藏这个元素或显示
            $('.symbol span').toggle();

            shift = (shift == true) ? false : true;

            return false;
        }

        // capslock是否被点击
        if ($this.hasClass('capslock')) {
   
            //更换class值
            $('.letter').toggleClass('uppercase');
            capslock = true;
            return false;
        }

        // 删除
        if ($this.hasClass('delete')) {
   
            var html = $write.html();

            $write.html(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";

        // 大写字母
        if ($this.hasClass('uppercase'))
            character = character.toUpperCase();

        // 一旦一个键被点击，移除shift。
        if (shift == true) {
   
            //隐藏这个元素或显示
            $('.symbol span').toggle();

            if (capslock === false)
                $('.letter').toggleClass('uppercase');

            shift = false;
        }

        // 添加到class值为write的文本框中
        $write.html($write.html() + character);
    });
});

最后还有Jquery的代码，同样也很重要：：
这个代码是不用我们自己写，

/*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */
!function(e,t){
   "use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){
   if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){
   "use strict";var t=[],E=C.document,r=Object.getPrototypeOf,s=t.slice,g=t.concat,u=t.push,i=t.indexOf,n={
   },o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={
   },m=function(e){
   return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){
   return null!=e&&e===e.window},c={
   type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){
   var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){
   return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1",k=function(e,t){
   return new k.fn.init(e,t)},p=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function d(e){
   var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}k.fn=k.prototype={
   jquery:f,constructor:k,length:0,toArray:function(){
   return s.call(this)},get:function(e){
   return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){
   var t=k.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){
   return k.each(this,e)},map:function(n){
   return this.pushStack(k.map(this,function(e,t){
   return n.call(e,t,e)}))},slice:function(){
   return this.pushStack(s.apply(this,arguments))},first:function(){
   return this.eq(0)},last:function(){
   return this.eq(-1)},eq:function(e){
   var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){
   return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},k.extend=k.fn.extend=function(){
   var e,t,n,r,i,o,a=arguments[0]||{
   },s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{
   },s++),"object"==typeof a||m(a)||(a={
   }),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(k.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||k.isPlainObject(n)?n:{
   },i=!1,a[t]=k.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},k.extend({
   expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){
   throw new Error(e)},noop:function(){
   },isPlainObject:function(e){
   var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=v.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){
   var t;for(t in e)return!1;return!0},globalEval:function(e,t){
   b(e,{
   nonce:t&&t.nonce})},each:function(e,t){
   var n,r=0;if(d(e)){
   for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},trim:function(e){
   return null==e?"":(e+"").replace(p,"")},makeArray:function(e,t){
   var n=t||[];return null!=e&&(d(Object(e))?k.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){
   return null==t?-1:i.call(t,e,n)},merge:function(e,t){
   for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){
   for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){
   var r,i,o=0,a=[];if(d(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g.apply([],a)},guid:1,support:y}),"function"==typeof Symbol&&(k.fn[Symbol.iterator]=t[Symbol.iterator]),k.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){
   n["[object "+t+"]"]=t.toLowerCase()});var h=function(n){
   var e,d,b,o,i,h,f,g,w,u,l,T,C,a,E,v,s,c,y,k="sizzle"+1*new Date,m=n.document,S=0,r=0,p=ue(),x=ue(),N=ue(),A=ue(),D=function(e,t){
   return e===t&&(l=!0),0},j={
   }.hasOwnProperty,t=[],q=t.pop,L=t.push,H=t.push,O=t.slice,P=function(e,t){
   for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},R="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",I="(?:\\\\.|[\\w-]|[^\0-\\xa0])+",W="\\["+M+"*("+I+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+I+"))|)"+M+"*\\]",$=":("+I+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+W+")*)|.*)\\)|)",F=new RegExp(M+"+","g"),B=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),_=new RegExp("^"+M+"*,"+M+"*"),z=new RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp($),V=new RegExp("^"+I+"$"),G={
   ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+$),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ne=function(e,t,n){
   var r="0x"+t-65536;return r!=r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){
   return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){
   T()},ae=be(function(e){
   return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{
   dir:"parentNode",next:"legend"});try{
   H.apply(t=O.call(m.childNodes),m.childNodes),t[m.childNodes.length].nodeType}catch(e){
   H={
   apply:t.length?function(e,t){
   L.apply(e,O.call(t))}:function(e,t){
   var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){
   var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&((e?e.ownerDocument||e:m)!==C&&T(e),e=e||C,E)){
   if(11!==p&&(u=Z.exec(t)))if(i=u[1]){
   if(9===p){
   if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{
   if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!A[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){
   if(c=t,f=e,1===p&&U.test(t)){
   (s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=k),o=(l=h(t)).length;while(o--)l[o]="#"+s+" "+xe(l[o]);c=l.join(","),f=ee.test(t)&&ye(e.parentNode)||e}try{
   return H.apply(n,f.querySelectorAll(c)),n}catch(e){
   A(t,!0)}finally{
   s===k&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){
   var r=[];return function e(t,n){
   return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){
   return e[k]=!0,e}function ce(e){
   var t=C.createElement("fieldset");try{
   return!!e(t)}catch(e){
   return!1}finally{
   t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){
   var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){
   var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){
   return function(e){
   return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){
   return function(e){
   var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){
   return function(e){
   return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){
   return le(function(o){
   return o=+o,le(function(e,t){
   var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){
   return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={
   },i=se.isXML=function(e){
   var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){
   var t,n,r=e?e.ownerDocument||e:m;return r!==C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),m!==C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.attributes=ce(function(e){
   return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){
   return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){
   return a.appendChild(e).id=k,!C.getElementsByName||!C.getElementsByName(k).length}),d.getById?(b.filter.ID=function(e){
   var t=e.replace(te,ne);return function(e){
   return e.getAttribute("id")===t}},b.find.ID=function(e,t){
   if("undefined"!=typeof t.getElementById&&E){
   var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){
   var n=e.replace(te,ne);return function(e){
   var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){
   if("undefined"!=typeof t.getElementById&&E){
   var n,r,i,o=t.getElementById(e);if(o){
   if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){
   return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){
   var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){
   while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){
   if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){
   a.appendChild(e).innerHTML="<a id='"+k+"'></a><select id='"+k+"-\r\\' msallowcapture=''><option selected=''></option></select>",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+k+"-]").length||v.push("~="),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+k+"+*").length||v.push(".#.+[+~]")}),ce(function(e){
   e.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){
   d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",$)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){
   var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){
   if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){
   if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e===C||e.ownerDocument===m&&y(m,e)?-1:t===C||t.ownerDocument===m&&y(m,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){
   if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===C?-1:t===C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]===m?-1:s[r]===m?1:0}),C},se.matches=function(e,t){
   return se(e,null,null,t)},se.matchesSelector=function(e,t){
   if((e.ownerDocument||e)!==C&&T(e),d.matchesSelector&&E&&!A[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{
   var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){
   A(t,!0)}return 0<se(t,C,null,[e]).length},se.contains=function(e,t){
   return(e.ownerDocument||e)!==C&&T(e),y(e,t)},se.attr=function(e,t){
   (e.ownerDocument||e)!==C&&T(e);var n=b.attrHandle[t.toLowerCase()],r=n&&j.call(b.attrHandle,t.toLowerCase())?n(e,t,!E):void 0;return void 0!==r?r:d.attributes||!E?e.getAttribute(t):(r=e.getAttributeNode(t))&&r.specified?r.value:null},se.escape=function(e){
   return(e+"").replace(re,ie)},se.error=function(e){
   throw new Error("Syntax error, unrecognized expression: "+e)},se.uniqueSort=function(e){
   var t,n=[],r=0,i=0;if(l=!d.detectDuplicates,u=!d.sortStable&&e.slice(0),e.sort(D),l){
   while(t=e[i++])t===e[i]&&(r=n.push(i));while(r--)e.splice(n[r],1)}return u=null,e},o=se.getText=function(e){
   var t,n="",r=0,i=e.nodeType;if(i){
   if(1===i||9===i||11===i){
   if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else while(t=e[r++])n+=o(t);return n},(b=se.selectors={
   cacheLength:50,createPseudo:le,match:G,attrHandle:{
   },find:{
   },relative:{
   ">":{
   dir:"parentNode",first:!0}," ":{
   dir:"parentNode"},"+":{
   dir:"previousSibling",first:!0},"~":{
   dir:"previousSibling"}},preFilter:{
   ATTR:function(e){
   return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){
   return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){
   var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{
   TAG:function(e){
   var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){
   return!0}:function(e){
   return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){
   var t=p[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&p(e,function(e){
   return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){
   return function(e){
   var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1<t.indexOf(i):"$="===r?i&&t.slice(-i.length)===i:"~="===</
最低0.47元/天 解锁文章
王中王喜之郎
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js实现简单虚拟键盘
weixin_44957026的博客
10-20 874
js实现简单虚拟键盘 1：效果图 2：项目结构 3：代码 1）：jquery.js文件下载地址：https://jquery.com/download/ 2）：index.html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1...
手把手教你JavaScript-简单的页面输入控制
明月如霜丶
12-30 733
1.姓名只能是汉字 var nameCheck =/^[\u4e00-\u9fa5]{2,21}$/; if(!nameCheck .test(name)){ alert("输入的'姓名'中含有非汉字字符!"); return false; } 2.简单的身份证校验（校验内容包括数字，位数，以及末尾的x,X） var idNoCheck = /(^\d{...
JavaScript写一个虚拟软键盘，可拼音输入
qq_25934747的博客
12-25 3644
在某些业务场景中，无法使用外接实体键盘，也不方便调出windows自带的虚拟键盘，这时候我们可以利用JavaScript写一个虚拟键盘，实现点击输入框即可唤醒，大小写中、英文及数字的输入。可满足实际使用时基本的输入要求。 具体实现： 首先是JS virtualkeyboard.js (function($){$.fn.extend({"virtualkeyboard":function(options){var temp='' temp+='<div class="virtualkeyboa
探索奇妙的JS虚拟键盘：js-keyboard
最新发布
gitblog_00068的博客
04-23 339
探索奇妙的JS虚拟键盘：js-keyboard 项目地址:https://gitcode.com/DaisyWang88/js-keyboard 项目简介 js-keyboard 是一个轻量级、可高度定制化的JavaScript库，用于在Web应用中生成交互式虚拟键盘。这个项目由DaisyWang88开发，旨在为触摸设备或者需要增强输入安全性的应用场景提供一个直观、高效的解决方案。 技术分析 核心...
酷炫的3d虚拟键盘，h5模拟键盘，键盘keycode查看，web键盘
yanxiaomu的博客
05-15 264
空闲时间写的一个3d虚拟键盘，可以查看keycode，支持mac和windows键盘。
web js虚拟键盘（中英文切换）
06-26
JS实现虚拟键盘。做网页前端，客户需要利用触摸屏进行操作，不外接鼠标键盘，能录入文字，包括数字，英文，中文。 JS实现虚拟键盘。做网页前端，客户需要利用触摸屏进行操作，不外接鼠标键盘，能录入文字，包括数字...
JS虚拟键盘--VirtualKeyboard.371
06-27
**JS虚拟键盘——VirtualKeyboard 3.7.1** 在网页开发中，有时为了提高用户交互体验或出于安全考虑（例如防止键盘记录器），开发者会选择使用JavaScript实现虚拟键盘。VirtualKeyboard 3.7.1是一款功能强大的jQuery...
js虚拟键盘.zip
07-05
JavaScript虚拟键盘是一种在网页上模拟真实物理键盘的技术，主要用于提高用户在输入敏感信息时的安全性，比如在在线支付、登录页面等场景。本资源“js虚拟键盘.zip”包含了一个名为"Keyboard-master"的项目，提供了...
js虚拟键盘输入框特效代码
03-20
总的来说，"js虚拟键盘输入框特效代码"是一种提高网页交互性的技术，它利用JavaScript和CSS来创建一个可视化的、可自定义的输入工具，适用于多种设备和应用场景。通过学习和理解这类代码，开发者可以为他们的网站或...
vue-keyboard：Vue.js的简单虚拟键盘
03-01
语音键盘 Vue 2的虚拟键盘。 安装： $ npm install --save vue-keyboard 资源： 。 用法： < keyboard xss=removed></ keyboard> 每个布局都接受一个管道| 用作键盘按钮的定界字符字符串。 您可以使用{text:action}语法包括特殊功能字符，其中text是将在按钮中呈现的文本，而action是按下该按钮时要调用的键盘组件中的操作。 内置的动作是： backspace -从当前值的末尾删除一个字符。 space -插入一个空格字符。 clear -清除整个输入值。 goto:n转到新的键盘布局，将n替换为要加载的布局的索引。 如果该action与任何这些内置动作都不匹配，则将使用动作名称作为事件名称，由键盘组件调度一个事件。 键盘组件将
虚拟键盘JS脚本
05-10
仿银行虚拟键盘JS脚本
Javascript键盘事件及输入控制
sifeimeng的专栏
06-05 3696
  Javascript键盘事件及输入控制 进行web开发时，我们会对表单做提交验证，为了进一步增强用户体验，要在用户输入时就进行限制，比如针对电话只能输入数字、长度不允许超过固定值等。随着微博的流行，从Twitter开始，很多记录的文字输入在设计时就都添加上了字数限制与提示的功能，这已成了输入框的标配。本文从这一需求出发，说明Javascript中键盘事件和输入控制的技术细节。 功能需求...
原生js创建虚拟数字键盘输入
励志~坚持~奋发~~~向上
09-19 5736
使用google浏览器访问效果图如下：                        以下是index.html文档源码： 模拟数字键盘 (function(){ var input1 = document.getEl
js 模拟键盘输入
热门推荐
LuckyTHP
05-23 1万+
var e = jQuery.Event("keyup");//模拟一个键盘事件 e.keyCode =13;//keyCode=13是回车 $("#test").trigger(e);
移动端虚拟键盘遮挡页面输入框等元素的解决方案
Quiet-Night的博客
07-05 1万+
遮挡
【html5手游开发】虚拟摇杆及虚拟按键的开发
一名普通码农的菜地
02-26 1万+
前言现在很多手游都有虚拟按钮–尤其是那些需要操作高的。那么我们也要紧跟时代步伐，开发一个虚拟按钮插件。难点解释1、首先绝对要先熟悉一下pixi。 2、要计算一下手指触摸拖动摇杆的角度–小学数学要过关，假如是小学连续留级十几年的话，会有点麻烦。 3、pixi有一些小bug，就是touch end会无缘无故由其他物体触发，代码里面已经有解决方案了。想知道原委就看看上一篇文章。实际运行界面核心代码<%
js虚拟键盘virtualkeyboard3.7.1修改版
10-28
虚拟键盘（VirtualKeyboard）是一个用于网页上输入文本的JavaScript插件。而VirtualKeyboard 3.7.1修改版则是在原有版本的基础上进行了一些改进和增强。 VirtualKeyboard 3.7.1修改版提供了更多的自定义选项，使...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值