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. }  

 代码在附件中

 

相关文章推荐

ionic调用键盘搜索功能轻松实现

ionic调用键盘搜索功能轻松实现

ionic-点击input时键盘自动弹出

ionic开发移动端界面时,在输入用户名和密码的时候,我希望输入法不要挡住我的输入框,并且输入框往上滚动的时候,顶部标题不要上移,只是input内容部分往上移动,点击密码输入框时我还想看见按钮,这样不...

JavaScript实现的可变动态数字键盘控件三种方式

JavaScript实现的可变动态数字键盘控件之一 @sunRainAmazing JavaScript编写和实现的可变动态键盘密码输入控件, 可以动态的生产数字键盘并显示, 并且...

(译)iPhone: 用公开API创建带小数点的数字键盘 (OS 3.0, OS 4.0)

更新:ios4.1现在已经将这个做到SDK了。你可以设置键盘类型为UIKeyboardTypeDecimalPad!完成! 在开发iphone程序的时候你可以选择各种键盘。其中的数字面板却没有带小数...

【在数字键盘上添加button】

//定义一个消息中心  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillS...

Android自定义数字键盘简单封装

废话不说先贴代码布局文件numeric.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

自定义数字键盘

自定义数字键盘 前端时间有个要优化键盘的需求,后来发现安卓自带的系统键盘很难修改,于是决定自定义一个数字键盘,该键盘是纯数字键盘,同时最上方中间有图标右边有完成键,最下方是,完成,0,删除键。思路大体...

自定义数字键盘

上周公司项目 要求做支付充值 弹出的数字键盘 可以跟支付宝一样,系统自带的外观不好看,要想做到像支付宝那样,想了想也就自己自定义做了。做完后发现也不难。UITextField 有一个inputView...

pjsip视频通信开发(上层应用)之数字键盘的制作

在pjsip视频通信开发(上层应用)之EditText重写中我制作了一个显示输入内容的EditText,这里将制作一个数字键盘,其实跟计算器一样,最多的就是用TableLayout来实现,内部通过权重...

IOS 自定义简陋的数字键盘

IOS 、数字软键盘、自定义安全键盘
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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