好久没有写博客了,最近有个需求关于数字键盘的,找了下网上的感觉有点重,太复杂!自己随手写了个符合自己需求的比较简单的,分享一下!希望大家指正
number.spiner.js
/** * 公共js方法 */ ;(function(win){ var NumberSpiner={ init:function(obj,type){ var that=this; var status=obj.getAttribute("data-status"); that.load(obj,type); if(status==1){ return; } // obj.onfoucs=function(){ // }; // obj.onblur=function(){ // var number_spinner=document.getElementById("number_spinner"); // number_spinner.style.display="none"; // }; }, load:function(obj,type){ var that=this; var $obj=$(obj); that.currentObj=$obj; var $number_spinner=$("#number_spinner"); if($number_spinner&&$number_spinner.length>0){ $number_spinner.show(); // return; }else{ var div=$("<div></div>"); div.attr("id","number_spinner"); div.attr("class","number-spinner"); var tempArr=['<ul class="number-box">']; tempArr.push('<li><div class="number" data-value="7">7</div></li>'); tempArr.push('<li><div class="number" data-value="8">8</div></li>'); tempArr.push('<li><div class="number" data-value="9">9</div></li>'); tempArr.push('<li><div class="number" data-value="4">4</div></li>'); tempArr.push('<li><div class="number" data-value="5">5</div></li>'); tempArr.push('<li><div class="number" data-value="6">6</div></li>'); tempArr.push('<li><div class="number" data-value="1">1</div></li>'); tempArr.push('<li><div class="number" data-value="2">2</div></li>'); tempArr.push('<li><div class="number" data-value="3">3</div></li>'); tempArr.push('<li><div class="number" data-value="0">0</div></li>'); tempArr.push('<li><div class="number" data-value=".">.</div></li><li><div class="number" data-value="del">删除</div></li>'); tempArr.push('</ul>'); div.html(tempArr.join("")); $(document.body).append(div); $number_spinner=$("#number_spinner"); $number_spinner.on("click",".number",function(){ var $this=$(this); var data_code=$this.attr("data-value"); $obj=that.currentObj; var val=$obj.val(); if(data_code){ switch(data_code){ case "del": var len=val.length; if(len==0){ val=""; }else{ val=val.substring(0,len-1); } $obj.val(val).trigger('input'); break; case ".": case "9": case "8": case "7": case "6": case "5": case "4": case "3": case "2": case "1": default: val+=data_code; $obj.val(val).trigger('input'); break; } } }); $(document).bind("click",function(e){ var obj=e.target; var $obj=$(obj); if(obj.tagName.toUpperCase()=="INPUT"||$obj.hasClass("number")){ return; }else{ $number_spinner=$("#number_spinner"); $number_spinner.hide(); } }); } // obj.setAttribute("data-status",1);\ var w_width=$(window).width(),w_height=$(window).height(); var offset=getAbsPoint(obj); var offset_top=offset.top; var offset_left=offset.left; var obj_height=$obj.outerHeight(); var obj_width=$obj.width(); var _h=$number_spinner.height(); var _w=$number_spinner.width(); var top=offset_top; var left=offset_left; if((offset_top+_h+obj_height)>w_height||type=="top"){ top=offset_top-_h-2; }else{ top=offset_top+obj_height+2; } if((offset_left+_w)>w_width){ left=offset_left-_w; }else{ left=offset_left; } $number_spinner.css({"top":top,"left":left}); } }; function getAbsPoint(e){ var x = e.offsetLeft, y = e.offsetTop; while(e=e.offsetParent){ x += e.offsetLeft; y += e.offsetTop; } console.log("x:"+x+","+"y:"+y); return {left:x,top:y}; } win['Team777NumberSpiner']=NumberSpiner; })(window);
基本css样式:
less版
.number-spinner{ .posa; z-index:3; // .p(3px); .number-box{ .p(2px); .bc(@white); .oh; li{ .w(33.3%); .fl; cursor:pointer; // .h(45); .lh(45); .number{ .m(2px); .yellow-style; .tc; } } } }
css版
.number-spinner { position: absolute; z-index: 3; } .number-spinner .number-box { padding: 2px; background-color: #ffffff; overflow: hidden; } .number-spinner .number-box li { width: 33.3%; float: left; cursor: pointer; line-height: 45px; } .number-spinner .number-box li .number { margin: 2px; background: #FDA24D; /* 一些不支持背景渐变的浏览器 */ background: -moz-linear-gradient(top, #fda24d, #fdda6f); background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fda24d), to(#fdda6f)); background: -o-linear-gradient(top, #fda24d, #fdda6f); border-radius: 5px; text-align: center; }
引用处理
由于是用angularjs处理
<input type="text" class="input-txt" ng-model="orderManager.mdseCode" ng-click="orderManager.getNumber($event)">
$scope.orderManager.getNumber=function($event,type){ Team777NumberSpiner.init($event.target,type); };
相关推荐
c#实现的简易 数字键盘/手机键盘,用来拨号用 实现方式是使button控件与textbox控件互动, 在textbox中输出数据
一个非常好用的jquery 数字键盘 看一眼就能使用 用起来非常简单 键盘样式非常好看
简单的自定义 密码 纯数字键盘
公司项目需要自定义数字键盘,做了一个,有需要的下载一下
C++的MFC开发工程!希望能够有所帮助!
非常简洁的一款jQuery虚拟数字键盘插件,调用也很简单,点击输入框弹出虚拟数字键盘按键输入效果。
DigitalKeyboard 简单的仿微信数字键盘
使用qt编写的数字键盘,包括有数字,正负号,退出,后退,确认,删除,小数点的功能。代码比较简单且代码中有具体注释,在这就不作具体说明
JKNumberKeyBoard 自定义数字键盘,简单快捷
iOS自定义数字键盘 使用简单 适配iPhone6/6PLUS self.keyBoardTF.inputView = [[WSNumberKeyBoard alloc] initWithControlTextField:self.keyBoardTF ReturnButtonName:nil andClickBlock:^(UITextField *...
使用HTML和jQuery实现6位密码。使用H5结合JQuery,模仿支付宝和微信支付的六位密码输入,重新绘制定义数字键盘,在规定的数字键盘中的数字进行点击,将密码填进六格的输入框,一个简单的小demo,适合新手学习交流
qt widget、qt for Android均可使用,数字键盘,只能输入数字。
简单清晰明了,关键部分都有注释~实现了自定义键盘还有输入框的消除
设计内容和要求 0-9十个数字分别对应一个按键,当其中一个按键按下时,在数码显示管上显示对应的数字。
最近支付的同事说,数字键盘有些问题;在移动设备上有时候比较难出现点(.) 和数字在一起的格局;因此,考虑到这种情况,就建议手写个模拟键盘了。花了一晚上的时间,写了个简单的键盘,基本能用。考虑到有的...
工程中输入身份证时,希望的到数字键盘来输入,但是数字键盘中没有x键,该工程完成这部分功能。通过代理实现,便于移植和优化.
通过jquery实现简单的数字小键盘,可以运用某些文本框的操作简便,可以作为密码的输入!
使用jquery实现的一个简单的虚拟键盘,该键盘使用时引入jquery。键盘针对input type为text的时候进行响应。
超实用的数字键盘.zip,手动实现简单的身份证数字键盘
利用按钮做的简单的数字键盘,提供一个思路,仅供参考