使用JS+jQuery实现网页虚拟键盘

最新推荐文章于 2024-04-20 09:59:52 发布
最新推荐文章于 2024-04-20 09:59:52 发布
阅读量980 收藏
点赞数
文章标签： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChengZiYa_/article/details/102654869
版权

##首先 我们先看一下完成后的效果
基本上功能都实现了
html页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网页虚拟键盘</title>
    <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.js"></script>
<script type="text/javascript" src="Keyboard.js"></script>

<script type="text/javascript">

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

            // 大小写Caps lock
            if ($this.hasClass("capslock")) {
                $(".letter").toggleClass("uppercase");
                capslock = true;
                return false;
            }

            // 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;
            }

            // 特殊字符
            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("delete")) {
                var html = $write.html();
                $write.html(html.substr(0, html.length - 1));
                return false;
            }

            // 大写
            if ($this.hasClass("uppercase")) character = character.toUpperCase();

            $write.html($write.html() + character);
        });
    })

</script>
</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;}

将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.l
最低0.47元/天 解锁文章
ChengZiYa_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery使用ajaxSubmit()提交表单示例
12-09
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法，所以使用此方法需要先引入这个插件。如下所示： 代码如下:[removed][removed][removed][removed] 那么，如何通过ajaxSubmit(obj)提交数据呢？首先我们需要一个form： XHTML 代码如下:<form>    标题：<input type=”text” name=”t
ajax上传文件：ajaxSubmit使用
赵崇
12-28 2万+
大多上传文件的时候，都是使用表单的方式进行提交的。 使用form表单上传文件，也有很多种方式：        1、界面上直接使用submit按钮提交。这种方式可以实现效果但是没有success事件。即，可以上传文件，但是没有反馈信息。        2、使用jquery的form方法提交表单，这种提交方式，可以对表单指定 onSubmit、success、error事件。这种方式会更加友好一些
推荐一款Vue.js实现的数字键盘组件——Vue-Number-Keyboard
最新发布
gitblog_00072的博客
04-20 448
推荐一款Vue.js实现的数字键盘组件——Vue-Number-Keyboard 项目地址:https://gitcode.com/yujinjin/vue-number-keyboard 项目简介 Vue-Number-Keyboard 是一个由Vue.js构建的轻量级、可自定义的数字输入键盘组件。它特别适合用于移动设备上的金融、密码或数量输入场景，确保数据安全并提供优秀的用户体验。 技术分析 ...
ajax知识点
m0_61852712的博客
10-11 429
ajax知识点
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交)
weixin_43845335的博客
04-26 2723
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交) ajaxSubmit 和ajaxForm区别 ajaxForm ajaxForm()不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始 ajaxForm()适用于以表单提交方式处理ajax技术（需...
两种方式提交Form表单：Submit提交和Ajax提交
weixin_47075952的博客
11-20 3068
使用Ajax提交表单的一般步骤如下：监听表单的submit事件。在事件处理函数中，阻止表单的默认提交行为。使用JavaScript获取表单数据。使用Ajax发送异步请求，将表单数据作为请求参数发送给服务器。处理服务器返回的响应结果，并根据需要更新页面内容。
jQuery网页虚拟键盘
06-01
用于在自助机上供用户输入英文，数字等使用的虚拟键盘
jQuery彩色酷炫虚拟键盘代码.zip
07-11
js代码 [removed][removed] [removed] $('textarea').focus(); $('.keyboard').keyboard({audio:'music/keydown.mp3'}); [removed]
jQuery苹果IOS虚拟键盘
04-10
jQuery苹果IOS虚拟键盘基于jquery.1.11.3.min.js制作，有全功能键盘、数字键盘两种形式。
jQuery虚拟键盘.zip
10-30
插件描述:jQuery虚拟键盘带中文拼音输入内有实际DEMO 加载了CSS和JS后在DIV ID=dvkeybord中加载PREVIOUS: NEXT: js图形验证码插件 jQuery自动定位当地天气预报 ...
JS实现电脑虚拟键盘打字测试
10-15
在本文中，我们将深入探讨如何使用JavaScript（JS）来实现一个电脑虚拟键盘并结合打字测试功能。这个项目旨在提供一个交互式的用户界面，让用户在没有物理键盘的情况下也能进行打字练习。 首先，HTML部分是整个应用...
利用AjaxSubmit()方法实现Form提交表单后回调功能
10-18
ajaxSubmit()方法是JQuery Form表单插件中的方法，使用时，需要在jsp或者html页面上，引入JQuery库和Form插件。接下来通过本文给大家分享通过AjaxSubmit()方法实现Form提交表单后回调功能，感兴趣的朋友跟随脚本之家小编一起看看吧
ajaxSubmit添加额外数据
羽渡尘的博客
03-26 3088
ajaxSubmit添加额外数据
Jquery 中 ajaxSubmit使用讲解
热门推荐
h70614959的专栏
04-16 22万+
最近在使用ajaxForm，随便把使用方法记下下来，以便以后回顾。 1 ，引入依赖脚本   //ajaxForm 依赖脚本 2 使用方法 var ajax_option={ url:"login",//默认是form action success:function(data){ } $('#testForm').ajaxSubmit(aja
$.ajax.submit,jQuery中的AjaxSubmit使用讲解
weixin_31001739的博客
08-05 1793
最近在使用ajaxForm，随便把使用方法记下下来，以便以后回顾。1 ，引入依赖脚本 //ajaxForm 依赖脚本2 使用方法var ajax_option={url:"login",//默认是form actionsuccess:function(data){}$('#testForm').ajaxSubmit(ajax_option);}//注意$("#testForm") 引号中名称必须要...
表单ajax提交插件,jQuery Form 表单提交插件-----ajaxSubmit() 的应用
weixin_34853926的博客
08-06 974
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。测试环境：部署到Tomcat中的web项目。一、ajaxSubmit() 介绍立即通过AJAX方式提交表单。最常见的用法是对用户提交表单的动作进行响应时调用它。ajaxForm需要零个或一个参数。唯一的一个参数可以是一个回调函数或者是一个可选参数对象。是否可以连环调用: 是。二、引入依赖的js网...
jQuery —— ajaxForm和ajaxSubmit的用法与区别
qq_53895518的博客
01-10 869
提交方式：ajaxSubmit能够立即通过AJAX提交表单，适用于各种情况下的提交，且不需要提供submit按钮。而ajaxForm不会直接提交表单，需要加入特定的监听事件才能阻止表单的直接提交，并使用AJAX进行提交。灵活性：ajaxSubmit更为灵活，依赖于事件机制，只要有事件存在就能使用该方法。只需要指定该form的action属性即可。而ajaxForm在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。阻止表单提交。
利用ajaxSubmit()实现Form表单submit()提交后的回调函数
周末未至
07-14 4万+
1、引入JQuery Form表单的js &lt;script type="text/javascript" src="${ctxStatic}/common/jquery.form.js"&gt;&lt;/script&gt; 下载链接：jquery.form.js  密码：fqr9  2.设置相应的参数 $(function(){     // 1.基本参数设置     var...
ajaxSubmit
看你灬梨涡浅笑
04-10 445
$('button').on('click', function() {    $('form').on('submit', function() {        var title = $('inpur[name=title]').val(),            content = $('textarea').val();        $(this).ajaxSubmit({      
three.js+原生js+jquery实现3d
06-06
使用 Canvas 实现 3D 效果的时候可以使用某些 JQuery 插件如 Three.js 风格的库等。 总之，Three.js 是一款非常好用、功能丰富的 3D 库，可以快速实现相关开发，而原生 JS 和 JQuery 实现 3D 的难度较大。具体使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值