ionic数字键盘
ionic最近挺火,最近我也在玩这个,本例实现在用户点击输入框时弹出数字键盘。
效果如下
关键代码
<script id="templates/modal_number_keyboard.html" type="text/ng-template"> <ion-modal-view > <ion-header-bar class="bar bar-header bar-positive"> <h1 class="title" ng-bind="currentNumber" ></h1> </ion-header-bar> <ion-content class="padding"> <div class="col col-offset-10"> <button class="button button-outline button-positive" ng-click="doInput(num.f);" >6</button> <button class="button button-outline button-positive" ng-click="doInput(num.g);" >7</button> <button class="button button-outline button-positive" ng-click="doInput(num.h);" >8</button> <button class="button button-outline button-positive" ng-click="doInput(num.i);" >9</button> </div> <div class="col col-offset-10"> <button class="button button-outline button-positive" ng-click="doInput(num.b);" >2</button> <button class="button button-outline button-positive" ng-click="doInput(num.c);" >3</button> <button class="button button-outline button-positive" ng-click="doInput(num.d);" >4</button> <button class="button button-outline button-positive" ng-click="doInput(num.e);" >5</button> </div> <div class="col col-offset-10"> <button class="button button-outline button-positive" ng-click="doInput(num.a);" >1</button> <button class="button button-outline button-positive" ng-click="doInput(num.j);" >0</button> <button class="button button-outline button-positive" ng-click="doInput(num.k);" >.</button> <button class="button button-outline button-positive" ng-click="doInput(num.l);" >C</button> </div> <div class="col col-offset-10"> <button class="button button-outline button-positive" ng-click="modalNumberKeyboard.hide()" >取消</button> <button class="button button-outline button-positive" ng-click="finishInput()">确定</button> </div> </ion-content> </ion-modal-view> </script>
$ionicModal.fromTemplateUrl('templates/modal_number_keyboard.html', { scope: $scope }).then(function(modal) { $scope.modalNumberKeyboard = modal; }); $scope.currentNumber=""; $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"}; $scope.doInput=function(n){ if(n=="C"){//清除键 $scope.currentNumber=""; }else if(n=="."){// .键 if( $scope.currentNumber!=""&&$scope.currentNumber.indexOf(".")==-1){ $scope.currentNumber=$scope.currentNumber+""+n; } }else if(n==0){//0键 if($scope.currentNumber==""||$scope.currentNumber!=0||$scope.currentNumber.indexOf(".")!=-1){ $scope.currentNumber=$scope.currentNumber+""+n; } }else if(n!=0&&n!="."&&n!="C"){//1-9键 if($scope.currentNumber=="0"){ $scope.currentNumber=n; }else{ $scope.currentNumber=$scope.currentNumber+""+n; } } }; var currentInput; $scope.showKeyBoard=function(t){ $scope.modalNumberKeyboard.show(); currentInput=t; }; $scope.finishInput=function(){ eval('$scope.'+currentInput+'=$scope.currentNumber==""?"0":$scope.currentNumber;'); $scope.modalNumberKeyboard.hide(); }
代码在附件中
如果您觉得我的文章给了您帮助,请为我买一杯饮料吧!以下是我的支付宝,意思一下我将非常感激!
相关推荐
绿豆饼 2020-07-28
半纸药笺 2020-07-26
半纸药笺 2020-06-14
芯果科技蔡彦 2020-04-30
芯果科技蔡彦 2020-04-14
kfq00 2020-04-10
samllcat 2020-03-27
ZillahV0 2016-08-27
半纸药笺 2019-11-18
qixiang0 2015-04-24
shichong 2015-05-14
庆华 2015-12-26
genglang 2016-05-01
琪凡睿 2016-04-28
GoDotDotDot 2018-12-12
WarmPure 2018-10-02
青 2017-09-19
GoDotDotDot 2017-07-21