ionic数字键盘

转载 2015年11月18日 11:24:57



博客分类: 

ionic最近挺火,最近我也在玩这个,本例实现在用户点击输入框时弹出数字键盘。

效果如下

 

 

关键代码

Html代码  收藏代码
  1. <script id="templates/modal_number_keyboard.html" type="text/ng-template">  
  2.       <ion-modal-view >  
  3.         <ion-header-bar class="bar bar-header bar-positive">  
  4.           <h1 class="title" ng-bind="currentNumber" ></h1>  
  5.          </ion-header-bar>  
  6.         <ion-content class="padding">  
  7.             <div class="col col-offset-10">  
  8.             <button class="button button-outline button-positive" ng-click="doInput(num.f);" >6</button>  
  9.             <button class="button button-outline button-positive" ng-click="doInput(num.g);" >7</button>  
  10.             <button class="button button-outline button-positive" ng-click="doInput(num.h);" >8</button>  
  11.             <button class="button button-outline button-positive" ng-click="doInput(num.i);" >9</button>  
  12.             </div>  
  13.             <div class="col col-offset-10">  
  14.             <button class="button button-outline button-positive" ng-click="doInput(num.b);" >2</button>  
  15.             <button class="button button-outline button-positive" ng-click="doInput(num.c);" >3</button>  
  16.             <button class="button button-outline button-positive" ng-click="doInput(num.d);" >4</button>  
  17.             <button class="button button-outline button-positive" ng-click="doInput(num.e);" >5</button>  
  18.             </div>  
  19.             <div class="col col-offset-10">  
  20.             <button class="button button-outline button-positive" ng-click="doInput(num.a);" >1</button>  
  21.             <button class="button button-outline button-positive" ng-click="doInput(num.j);" >0</button>  
  22.             <button class="button button-outline button-positive" ng-click="doInput(num.k);" >.</button>  
  23.             <button class="button button-outline button-positive" ng-click="doInput(num.l);" >C</button>  
  24.             </div>  
  25.             <div class="col col-offset-10">  
  26.             <button class="button button-outline button-positive" ng-click="modalNumberKeyboard.hide()" >取消</button>  
  27.             <button class="button button-outline button-positive" ng-click="finishInput()">确定</button>  
  28.             </div>  
  29.          </ion-content>  
  30.       </ion-modal-view>  
  31.     </script>  

伦理片 http://www.dotdy.com/


Js代码  收藏代码
  1. $ionicModal.fromTemplateUrl('templates/modal_number_keyboard.html', {  
  2.   scope: $scope  
  3.  }).then(function(modal) {  
  4.   $scope.modalNumberKeyboard = modal;  
  5. });  
  6.   
  7.    $scope.currentNumber="";  
  8. $scope.num={"a":1,"b":2,"c":3,"d":4,"e":5,"f":6,"g":7,"h":8,"i":9,"j":0,"k":".","l":"C"};  
  9. $scope.doInput=function(n){  
  10.    if(n=="C"){//清除键  
  11.   $scope.currentNumber="";  
  12.  }else if(n=="."){// .键  
  13.   if( $scope.currentNumber!=""&&$scope.currentNumber.indexOf(".")==-1){  
  14.    $scope.currentNumber=$scope.currentNumber+""+n;  
  15.   }  
  16.  }else if(n==0){//0键  
  17.    if($scope.currentNumber==""||$scope.currentNumber!=0||$scope.currentNumber.indexOf(".")!=-1){  
  18.     $scope.currentNumber=$scope.currentNumber+""+n;  
  19. }  
  20.  }else if(n!=0&&n!="."&&n!="C"){//1-9键  
  21.       if($scope.currentNumber=="0"){  
  22.     $scope.currentNumber=n;  
  23. }else{  
  24.        $scope.currentNumber=$scope.currentNumber+""+n;  
  25.       }  
  26.  }  
  27. };  
  28.    var currentInput;  
  29.    $scope.showKeyBoard=function(t){  
  30.       $scope.modalNumberKeyboard.show();  
  31. currentInput=t;  
  32.  };  
  33. $scope.finishInput=function(){  
  34.      eval('$scope.'+currentInput+'=$scope.currentNumber==""?"0":$scope.currentNumber;');  
  35.  $scope.modalNumberKeyboard.hide();  
  36. }  

 代码在附件中

 

移动端手机网站限制input只能输入数字

用input:tel属性解决
  • kongjiea
  • kongjiea
  • 2014年10月17日 14:42
  • 28937

ionic中input框禁止输入问题

其实这个问题在之后沥青思路之后觉得还是挺好实现的,没有思路的时候真是找不到头绪~ 功能的描述为:当输入框中没有内容时,允许用户编辑;当其中有内容时不允许用户编辑,只有当用户点击编辑按钮后,才可允...
  • csdnmmcl
  • csdnmmcl
  • 2015年09月14日 09:54
  • 4343

android 自定义纯数字键盘输入

很久没更新博客了,最近在做一个新项目,遇到了很多坑,现将遇到的坑学到的东西一个个记录下来,方便自己和大家共同学习。后面还会抽出时间将项目中遇到的其他问题一一上传分析。项目中需要使用自定义数字键盘输入金...
  • LiuWaiter
  • LiuWaiter
  • 2017年06月30日 10:59
  • 490

原生js创建虚拟数字键盘输入

使用google浏览器访问效果图如下:                        以下是index.html文档源码: 模拟数字键盘 ...
  • willamlan
  • willamlan
  • 2015年09月19日 23:08
  • 2025

【COCOS2DX-游戏开发之七】添加启动数字输入法的功能

cocos2d-x 里面默认输入法只有一种,就是启动的时候就是系统默认的输入法,然后可以切换数字,中英文等等, 但是我们程序里有个功能设置价格,不希望能够输入中英文,只要输入数字,输入以后再判断显...
  • teng_ontheway
  • teng_ontheway
  • 2013年06月24日 12:35
  • 4582

Adroid EditText限制输入数字与英文默认弹出数字键盘

Adroid限制输入数字与英文默认弹出数字键盘 终于要写博客了,以前总觉得技术大牛才能写博客,后面想想,分享个人想法与技术探讨而写博客也是一种不错的交流方式。今天讲讲我在项目中遇到的一个实际需求,也...
  • u013210543
  • u013210543
  • 2015年05月20日 11:31
  • 5442

Ionic2 配置属性

通过direction可以控制页面是从左往右还是从右往左 goPage( ) { this.nav.push(Page,{},{animate: true, direction: ‘bac...
  • u010730897
  • u010730897
  • 2016年11月21日 11:46
  • 1585

Android 自定义数字键盘(三)自定义输入框

Android 自定义数字键盘(一) Android 自定义数字键盘(二)随机数字 Demo地址:https://github.com/danfengfirst/KeyDemo 这篇博客是...
  • danfengw
  • danfengw
  • 2016年12月27日 17:05
  • 2000

WinCE下数字键盘

最近正在开发一个移动数据采集系统,其中涉及到了数据的录入功能,先开始直接调用的是系统自带的拼音键盘,如下图所示。                     在实际的试运行过程中,用户觉得单纯录入数字,...
  • qiujialongjjj
  • qiujialongjjj
  • 2013年01月11日 09:11
  • 3767

Qt实战开发-数字软键盘

开发的思路 布局键盘界面 每一个button对应一个槽函数 把输入的字符返回到点击处的文本编辑框开发过程 首先定义功能button,在头文件中定义 QString getText(); ...
  • Osean_li
  • Osean_li
  • 2017年03月08日 21:31
  • 1618
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ionic数字键盘
举报原因:
原因补充:

(最多只允许输入30个字)