如何在离子 1 中只允许输入一个小数点

Posted

技术标签:

【中文标题】如何在离子 1 中只允许输入一个小数点【英文标题】:How to allow only one decimal point for input of type number in ionic 1 【发布时间】:2018-02-24 06:06:16 【问题描述】:

我正在使用数字类型的输入,它允许多个小数点,所以我尝试使用正则表达式不允许超过一个小数点,但即使在使用正则表达式后我也面临同样的问题,谁能告诉我如何在ionic1中只允许输入类型数字的一个小数点

html

<input stopccp focus-me class="inputContainer trade_input" type="number" name="" ng-model="vm.total_amount[$index]" ng-change="vm.onTotalCost()" limit-char limit="5" ng-keyup="vm.decimalcheck(vm.total_amount[$index])"  >

函数中的正则表达式:

function decimalcheck (element) 
  $log.log('decimalcheck got called', element);
  var regex = /\d*\.?\d?/g;
  return regex.exec(element);

【问题讨论】:

【参考方案1】:

试试这个正则表达式:

^\d*\.?\d+$

Click for Demo

说明:

^ - 字符串开始 \d*- 0+ 位 \.?- 0 或 1 个小数点 \d+- 1+ 位(因此必须在小数点后至少有一位,如果存在的话) $- 字符串结束

输出:

【讨论】:

【参考方案2】:
<input type="text" pattern="\d+\.?\d?(?!\d)" />

【讨论】:

【参考方案3】:

脚本

$('.number').keypress(function(event) 
    var $this = $(this);
    if ((event.which != 46 || $this.val().indexOf('.') != -1) &&
       ((event.which < 48 || event.which > 57) &&
       (event.which != 0 && event.which != 8))) 
           event.preventDefault();
    

    var text = $(this).val();
    if ((event.which == 46) && (text.indexOf('.') == -1)) 
        setTimeout(function() 
            if ($this.val().substring($this.val().indexOf('.')).length > 3) 
                $this.val($this.val().substring(0, $this.val().indexOf('.') + 3));
            
        , 1);
    

    if ((text.indexOf('.') != -1) &&
        (text.substring(text.indexOf('.')).length > 1) &&
        (event.which != 0 && event.which != 8) &&
        ($(this)[0].selectionStart >= text.length - 1)) 
            event.preventDefault();
          
);

$('.number').bind("paste", function(e) 
var text = e.originalEvent.clipboardData.getData('Text');
if ($.isNumeric(text)) 
    if ((text.substring(text.indexOf('.')).length > 3) && (text.indexOf('.') > -1)) 
        e.preventDefault();
        $(this).val(text.substring(0, text.indexOf('.') + 3));
   

else 
        e.preventDefault();
     
);

HTML

<input type="text" class="number" />

Here is your answer

【讨论】:

【参考方案4】:

我想你只是想念 start(^) 和 end($) 运算符

function decimalcheck (element) 
  $log.log('decimalcheck got called', element);
  var regex = /^\d*\.?\d?$/g;
  return regex.exec(element);

【讨论】:

【参考方案5】:

在你的 html 中试试这个,它对我有用

pattern = "^\d*\.?\d+$"

像这样:

<input stopccp focus-me class="inputContainer trade_input" type="number" name="" ng-model="vm.total_amount[$index]" ng-change="vm.onTotalCost()" limit-char limit="5" ng-keyup="vm.decimalcheck(vm.total_amount[$index])" pattern="^\d*\.?\d+$">

【讨论】:

这是另一个答案的副本

以上是关于如何在离子 1 中只允许输入一个小数点的主要内容,如果未能解决你的问题,请参考以下文章

[Flutter] TextField 中只允许输入合法的小数

在 type=text Ionic 的离子输入中只允许数字

EXCEL表一列数据中只筛选出“整数”或是“小数”怎么办????

C#中设置Text框中只可录入至多2位小数如何验证?

在EXCEL中,如何取小数点前和小数点后的数字

如何限制 EditText 输入只允许 3 位整数或小数