简体   繁体   English

在文本框中超过最大位数后显示离子弹出

[英]Show Ionic Popup after exceeding maximum number of digits in a textbox

I'm currently working on a basic calculator using Ionic1 and AngularJS. 我目前正在使用Ionic1和AngularJS开发基本的计算器。 I want to limit the number of digits inputted on the screen to only 15digits. 我想将屏幕上输入的位数限制为仅15位。 I want to show an ionic popup to the user. 我想向用户显示一个离子弹出窗口。 I am using numeric key(buttons) for inputting numbers in my calculator. 我正在使用数字键(按钮)在计算器中输入数字。 How can I do that? 我怎样才能做到这一点?

您可以在控制器中使用ng-change并发送ng-model值,在控制器中检查输入的长度是否等于15,您可以显示弹出窗口

You can watch your model value using $scope.$watch . 您可以使用$scope.$watch查看模型值。

view.html view.html

<input type="text" ng-model="inputValue">

controller.js controller.js

$scope.$watch('inputValue', function(newValue, oldValue) {
    if(newValue.length === 15) {
        showPopup(); // your function to show popup
    }
});

HTML: HTML:

<input type="input" id="myinput1" value="0" size="15" maxlength="15" />

JS: JS:

$(document).ready(function(){
    $('[id^=myinput1]').keypress(validateNumber);
});
$( "#myinput1" ).on('input', function() {
    if ($(this).val().length>=15) {
        alert('show pop up');       
    }
});
function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

JSFiddle Demo JSFiddle演示

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM