效果图:
1、引入jquery.js文件
2、css样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <style type= "text/css" > #numberkeyboard { border : 1px solid #b3b3b3 ; background : #f2f3f7 ; height : 285px ; margin : 0 ; padding : 2px ; position : relative ; visibility : visible !important ; width : 285px ; } #numberkeyboard .numbtn { -moz-border-radius: 4px ; /* Gecko browsers */ -webkit-border-radius: 4px ; /* Webkit browsers */ border-radius: 4px ; /* W3C syntax 圆角 */ float : left ; height : 68px ; width : 68px ; border : solid 1px #b3b3b3 ; margin-top : 1px ; margin-left : 1px ; font-family : Verdana , 微软雅黑, 雅黑; font-size : 22px ; line-height : 69px ; text-align : center ; cursor : default ; background-image : url (pics/numbtn.png); background-position : -1px -1px ; } #numberkeyboard .numbtn:hover { background-position : -1px -72px ; } .numbtndown { background-position : -1px -143px !important ; } </style> |
3、js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <script type= "text/javascript" > function loadNumberKeyboard(obj) { if ($( "#numberkeyboard" ).length == 0) { var numbtnhtml = '<div class="numbtn" key="1">1</div><div class="numbtn" key="2">2</div><div class="numbtn" key="3">3</div><div class="numbtn" key="backspace">←</div><div class="numbtn" key="4">4</div><div class="numbtn" key="5">5</div><div class="numbtn" key="6">6</div><div class="numbtn" key="clear">清空</div><div class="numbtn" key="7">7</div><div class="numbtn" key="8">8</div><div class="numbtn" key="9">9</div><div class="numbtn" key="" style="visibility: hidden;"></div><div class="numbtn" key="sign">+/-</div><div class="numbtn" key="0">0</div><div class="numbtn" key=".">.</div><div class="numbtn" key="close">关闭</div>' ; $( "body" ).append( '<div style="position: absolute; left: 0; top: 0; display: none;"><div id="numberkeyboard">' + numbtnhtml + '</div></div>' ); $( "#numberkeyboard" ).find( ".numbtn" ).bind( "mousedown" , function () { $( this ).addClass( "numbtndown" ); }); $( "#numberkeyboard" ).find( ".numbtn" ).bind( "mouseup" , function () { $( this ).removeClass( "numbtndown" ); }); } var containerDiv = $( "#numberkeyboard" ).parent(); containerDiv.show(); containerDiv.css( "z-index" , 9100); obj = $(obj); if (obj.attr( "id" )) { var objpadding = parseInt(obj.css( "padding-top" ).replace( "px" , "" )) + parseInt(obj.css( "padding-bottom" ).replace( "px" , "" )); if (obj.offset().left + 340 >= $(window).width()) { containerDiv.css( "left" , $(window).width() - 340); } else { containerDiv.css( "left" , obj.offset().left); } if (obj.offset().top + 291 + obj.height() + objpadding + 2 + 5 >= $(window).height() + $(window).scrollTop()) { containerDiv.css( "top" , obj.offset().top - 291 - 5); } else { containerDiv.css( "top" , obj.offset().top + obj.height() + objpadding + 2 + 5); } } $( "#numberkeyboard" ).find( ".numbtn" ).unbind( "click" ); $( "#numberkeyboard" ).find( ".numbtn" ).bind( "click" , function () { obj.focus(); var key = $( this ).attr( "key" ); switch (key) { case "backspace" : if (obj.val().length > 0) { obj.val(obj.val().substr(0, obj.val().length - 1)); } break ; case "clear" : obj.val( "" ); break ; case "sign" : if (obj.val().length > 0) { if (obj.val().substr(0, 1) == "-" ) { obj.val(obj.val().substr(1, obj.val().length - 1)); } else { obj.val( "-" + obj.val()); } } break ; case "close" : $( "#numberkeyboard" ).find( ".numbtn" ).unbind( "click" ); containerDiv.hide(); break ; default : obj.val(obj.val() + key); break ; } }); } $( function () { $( "input[type='number']" ).click( function () { loadNumberKeyboard( this ); }); }); </script> |
4、html
1 | < input id="inMoney" type="number" class="inmoney" value="" placeholder="请输入金额"></ input > |
5、css样式中需要的背景图片(图片名称numbtn.png)可直接在本图点击右键保存
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥