如何防止在文本框中粘贴非数值?

Posted

技术标签:

【中文标题】如何防止在文本框中粘贴非数值?【英文标题】:How to prevent pasting of non-numerical values in textbox? 【发布时间】:2017-03-04 14:27:51 【问题描述】:

app.directive('allowPattern', [allowPatternDirective]);
function allowPatternDirective() 
    return 
        restrict: "A",
        compile: function (tElement, tAttrs) 
            return function (scope, element, attrs) 
                element.bind("keypress", function (event) 
                     var keyCode = event.which || event.keyCode; 
                    if ((keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122)) 
                        event.preventDefault();
                        return false;
                    
                );

            ;
        
    ;
&lt;input type="text" allow-pattern="[0-9]" autofocus /&gt;

当粘贴的内容不适用于该字段时,如何防止在文本框中粘贴? (它应该粘贴到适用的内容)

应用背景:C#、AngularJS

我的应用程序中有一个文本框,它应该只接受数字。目前我正在使用 Keypress 指令,它可以防止输入非数字值。但是当我将非数字值与数字值(例如:NUMBER123)一起复制粘贴时,它会被粘贴。但要求是它根本不应该粘贴。我怎样才能通过适当的角度 js 指令/jquery 来实现这一点。

【问题讨论】:

把代码贴在这里 请阅读***.com/help/how-to-ask 并修改您的问题。提供更多详细信息,包括您当前的代码和您已经完成的事情,将使帮助变得更加容易。 【参考方案1】:

这是您的要求。

var app = angular.module('app', []);

app.directive('allowNumbers', function() 
  return 
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) 
      function test(text) 
        var input = text.replace(/[^0-9]/g, '');
        if(input !== text) 
            ngModelCtrl.$setViewValue("");
            ngModelCtrl.$render();
        
        return input;
      
      ngModelCtrl.$parsers.push(test);
    
  ; 
);

app.controller('MainCtrl', function($scope) 
);
<html ng-app="app">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Directive</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <input allow-numbers type="text" ng-model="test" autofocus>
  </body>

</html>

请运行这个 sn-p

Js fiddle of the directive

【讨论】:

谢谢。但这也是一个问题。 如果我粘贴“abc123” - 它粘贴“123”。但是根据我的要求,如果复制的值具有非数值,则根本不应该粘贴。我必须做出哪些改变才能做到这一点? 已更新答案,立即查看【参考方案2】:

在你的头部试试这个,你的文本框应该是这样的。

function onlyNos(e, t) 
  try 
    if (window.event) 
      var charCode = window.event.keyCode;
     else if (e) 
      var charCode = e.which;
     else 
      return true;
    
    if (charCode > 31 && (charCode < 48 || charCode > 57)) 
      return false;
    
    return true;
   catch (err) 
    alert(err.Description);
  
&lt;input type="text" onkeypress="return onlyNos(event,this);" /&gt;

【讨论】:

这不会阻止粘贴非数值!!

以上是关于如何防止在文本框中粘贴非数值?的主要内容,如果未能解决你的问题,请参考以下文章

防止在文本框中输入非 ascii 字符

防止用户使用 jQuery 在文本框中输入非数字 [重复]

请教,使用Excel VBA编程,如何在文本框中具有右键功能?然后可以复制/粘贴。谢谢。

如何防止用户在文本框中输入特殊字符[重复]

从html输入文本框中按回车键时如何防止回发?

在文本框中插入整数值