`
bewithme
  • 浏览: 429983 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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();
	  }

 代码在附件中

 

如果您觉得我的文章给了您帮助,请为我买一杯饮料吧!以下是我的支付宝,意思一下我将非常感激!
  • 大小: 12.3 KB
  • 大小: 8.4 KB
1
0
分享到:
评论

相关推荐

    Python-模拟ios数字键盘输入

    在这个场景下,模拟iOS数字键盘输入可能涉及到处理Ionic应用中的键盘事件,确保当键盘弹出时,界面布局不会被破坏。 总之,模拟iOS数字键盘输入涉及了Python的自动化测试知识,包括使用Appium、WebDriverAgent等...

    ion-digit-keyboard-v2:在Ionic 2应用程序中使用的数字键盘插件

    离子2位数字键盘 立即使用具有以下ID的尝试: c53c6c00 。1-信息版本:2.0 作者:Skol(Vincent Letellier) 电子邮件: 捐赠:非常欢迎您随时捐赠:-)2-变更日志接下来会发生什么(尽快)? 全局服务,用于管理键盘...

    ionic-plugin

    键盘cordova.plugins.Keyboard对象提供了使与键盘的交互更容易的函数,并触发事件以指示键盘... native.keyboardshow 事件对象上给出了一个数字keyboardHeight ,它是键盘的像素高度。 本机键盘皮Keyboard.hideKeyboar

    cordova-android-focus-plugin:通过模拟原生触摸在Android中的cordova Web视图中聚焦元素

    Ionic的可以帮助您以编程方式触发软键盘,但这仅适用于默认的字母数字键盘。 如果您需要弹出其他键盘(例如仅数字键盘),则此插件可以派上用场。安装cordova plugin add ...

    仿支付宝支付密码输入

    3. **JavaScript交互**:监听用户的触摸或点击事件,当用户触碰某个输入框时,显示数字键盘(可以使用自定义键盘或者系统键盘),并记录输入的数字。同时,更新对应的格子状态。 ```javascript let password = ''; ...

    精通JavaScript动态网页编程(实例版)

    1. **基础语法**:包括变量声明(var、let、const)、数据类型(字符串、数字、布尔、null、undefined、对象、数组、函数)、运算符、流程控制(条件语句、循环)以及错误处理。 2. **DOM操作**:学习如何通过...

    行业文档-设计装置-富媒体数据显示界面及其实现方法.zip

    比如,为听障用户添加字幕,为视觉障碍者提供语音描述,或者通过键盘导航支持非触控设备用户。 实现富媒体数据显示界面的方法通常涉及以下技术: 1. HTML5:HTML5引入了许多新的元素和API,如`&lt;video&gt;`和`&lt;audio&gt;`...

    javascript开发技术大全

    1. **JavaScript基础**:学习JavaScript首先要掌握其基本语法,包括变量、数据类型(如字符串、数字、布尔、对象、数组等)、控制流程(条件语句、循环)、函数以及作用域等。此外,理解闭包和原型链是深入...

    web-javascript

    1. **基础语法**:JavaScript的基础包括变量、数据类型(如字符串、数字、布尔值、null、undefined、对象和数组)、运算符、流程控制(条件语句、循环结构)以及函数。这些构成了编写任何JavaScript代码的基础。 2....

    Lightning-McQueen

    1. **JavaScript基础**:JavaScript的基础包括变量、数据类型(如字符串、数字、布尔值、对象和数组)、操作符、流程控制(条件语句和循环)、函数以及事件处理。 2. **DOM操作**:在网页上,JavaScript通过...

    intro-curriculum-4008:入门コースの4章8节の练习(ISC许可证)

    1. **基础语法**:变量声明(var、let、const)、数据类型(字符串、数字、布尔、数组、对象等)、操作符(算术、比较、逻辑)、流程控制(条件语句、循环语句)。 2. **函数**:定义函数、参数、返回值、匿名函数...

    行动

    它的基本语法包括变量声明、数据类型(如字符串、数字、布尔值、null、undefined)、运算符、流程控制(条件语句、循环语句)和函数。 2. **DOM操作**:"行动"可能涉及到文档对象模型(Document Object Model),...

    attainUTask

    1. **变量与数据类型**:JavaScript支持动态类型,意味着变量可以存储不同类型的数据,如字符串、数字、布尔值、null、undefined、对象等。ES6引入了新的数据类型——Symbol和BigInt。 2. **函数**:函数是可重用的...

    我的一天

    - 变量与数据类型:JavaScript支持var、let和const声明变量,以及基本数据类型(如字符串、数字、布尔值)和复杂数据类型(如对象、数组)。 - 控制流:包括条件语句(if...else)、循环(for、while、do...while...

    特雷克斯

    1. **基础语法**:JavaScript的基础包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔、null、undefined、对象、数组、符号、BigInt)、运算符(算术、比较、逻辑、三元)、流程控制(条件语句、...

    ITCS-6112

    随着技术的发展,JavaScript已经发展成为一种全功能的编程语言,支持服务器端开发(Node.js)、移动应用开发(React Native、Ionic等)以及桌面应用(Electron)。 二、语法基础 JavaScript语法基于ECMAScript规范...

    favorites:我喜欢的节目、电影、书籍等的列表

    在数字时代,这样的收藏可以借助各种在线平台或自建网站来实现,比如GitHub Pages。 【描述】提到的是“GMS奖学金的详细常见问题解答”,这可能是指Google Mobility Scholarships(GMS)项目的一个部分。Google ...

    dev

    它包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔值、null、undefined、对象、数组、符号)、运算符(算术、比较、逻辑、位、赋值等)以及控制流(条件语句、循环、函数、异常处理)。...

    产品前端

    它是一种轻量级的解释型编程语言,最初用于客户端浏览器,如今已发展为全栈语言,支持服务器端开发(如Node.js)以及移动端应用(如React Native和Ionic)。 在“产品前端”这个主题中,我们主要关注的是利用...

Global site tag (gtag.js) - Google Analytics