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(); }
代码在附件中
如果您觉得我的文章给了您帮助,请为我买一杯饮料吧!以下是我的支付宝,意思一下我将非常感激!
相关推荐
在这个场景下,模拟iOS数字键盘输入可能涉及到处理Ionic应用中的键盘事件,确保当键盘弹出时,界面布局不会被破坏。 总之,模拟iOS数字键盘输入涉及了Python的自动化测试知识,包括使用Appium、WebDriverAgent等...
离子2位数字键盘 立即使用具有以下ID的尝试: c53c6c00 。1-信息版本:2.0 作者:Skol(Vincent Letellier) 电子邮件: 捐赠:非常欢迎您随时捐赠:-)2-变更日志接下来会发生什么(尽快)? 全局服务,用于管理键盘...
键盘cordova.plugins.Keyboard对象提供了使与键盘的交互更容易的函数,并触发事件以指示键盘... native.keyboardshow 事件对象上给出了一个数字keyboardHeight ,它是键盘的像素高度。 本机键盘皮Keyboard.hideKeyboar
Ionic的可以帮助您以编程方式触发软键盘,但这仅适用于默认的字母数字键盘。 如果您需要弹出其他键盘(例如仅数字键盘),则此插件可以派上用场。安装cordova plugin add ...
3. **JavaScript交互**:监听用户的触摸或点击事件,当用户触碰某个输入框时,显示数字键盘(可以使用自定义键盘或者系统键盘),并记录输入的数字。同时,更新对应的格子状态。 ```javascript let password = ''; ...
1. **基础语法**:包括变量声明(var、let、const)、数据类型(字符串、数字、布尔、null、undefined、对象、数组、函数)、运算符、流程控制(条件语句、循环)以及错误处理。 2. **DOM操作**:学习如何通过...
比如,为听障用户添加字幕,为视觉障碍者提供语音描述,或者通过键盘导航支持非触控设备用户。 实现富媒体数据显示界面的方法通常涉及以下技术: 1. HTML5:HTML5引入了许多新的元素和API,如`<video>`和`<audio>`...
1. **JavaScript基础**:学习JavaScript首先要掌握其基本语法,包括变量、数据类型(如字符串、数字、布尔、对象、数组等)、控制流程(条件语句、循环)、函数以及作用域等。此外,理解闭包和原型链是深入...
1. **基础语法**:JavaScript的基础包括变量、数据类型(如字符串、数字、布尔值、null、undefined、对象和数组)、运算符、流程控制(条件语句、循环结构)以及函数。这些构成了编写任何JavaScript代码的基础。 2....
1. **JavaScript基础**:JavaScript的基础包括变量、数据类型(如字符串、数字、布尔值、对象和数组)、操作符、流程控制(条件语句和循环)、函数以及事件处理。 2. **DOM操作**:在网页上,JavaScript通过...
1. **基础语法**:变量声明(var、let、const)、数据类型(字符串、数字、布尔、数组、对象等)、操作符(算术、比较、逻辑)、流程控制(条件语句、循环语句)。 2. **函数**:定义函数、参数、返回值、匿名函数...
它的基本语法包括变量声明、数据类型(如字符串、数字、布尔值、null、undefined)、运算符、流程控制(条件语句、循环语句)和函数。 2. **DOM操作**:"行动"可能涉及到文档对象模型(Document Object Model),...
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)、运算符(算术、比较、逻辑、三元)、流程控制(条件语句、...
随着技术的发展,JavaScript已经发展成为一种全功能的编程语言,支持服务器端开发(Node.js)、移动应用开发(React Native、Ionic等)以及桌面应用(Electron)。 二、语法基础 JavaScript语法基于ECMAScript规范...
在数字时代,这样的收藏可以借助各种在线平台或自建网站来实现,比如GitHub Pages。 【描述】提到的是“GMS奖学金的详细常见问题解答”,这可能是指Google Mobility Scholarships(GMS)项目的一个部分。Google ...
它包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔值、null、undefined、对象、数组、符号)、运算符(算术、比较、逻辑、位、赋值等)以及控制流(条件语句、循环、函数、异常处理)。...
它是一种轻量级的解释型编程语言,最初用于客户端浏览器,如今已发展为全栈语言,支持服务器端开发(如Node.js)以及移动端应用(如React Native和Ionic)。 在“产品前端”这个主题中,我们主要关注的是利用...