blocks|key|230743|text|使用步骤标记将最小可变值设置为某个十进制数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|230744|例如step="0.01“|230745|<input+type="number"+step="0.01"+min="0"+class="form-control"+
name="form_name"+id="your_id"+placeholder="Please+Input+a+decimal+number"+required>|code-block|syntax|javascript|230746|这里有一些关于它的文档：|230747|http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/|offset|length|230748|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|2C|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

Use the step tag to set the minimum changeable value to some decimal number:

e.g.
step="0.01"

<pre><code>&lt;input type="number" step="0.01" min="0" class="form-control" 
name="form_name" id="your_id" placeholder="Please Input a decimal number" required&gt;
</code></pre>

There is some documentation on it here:

<a href="http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/">http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/</a>

blocks|key|230639|text|您可以很容易地使用ng模式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|230640|ng-pattern="/%5E[1-9][0-9]{0,2}(?:,?[0-9]{3}){0,3}(?:\.[0-9]{1,2})?$/"|code-block|syntax|javascript|230641|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You could easily use the ng-pattern.

<pre><code>ng-pattern="/^[1-9][0-9]{0,2}(?:,?[0-9]{3}){0,3}(?:\.[0-9]{1,2})?$/"
</code></pre>

blocks|key|14238|text|有一个输入数字指令，我相信它可以做你想要的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|14239|<input+type="number"
+++ng-model="{string}"
+++[name="{string}"]
+++[min="{string}"]
+++[max="{string}"]
+++[required]
+++[ng-required="{string}"]
+++[ng-minlength="{number}"]
+++[ng-maxlength="{number}"]
+++[ng-pattern="{string}"]
+++[ng-change="{string}"]>|code-block|syntax|javascript|14240|官方文档在这里：http://docs.angularjs.org/api/ng.directive:input.number|offset|length|14241|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng.directive:input.number^0|0|0|8|1J|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

There is an input number directive which I belive can do just what you want. 

<pre><code>&lt;input type="number"
 ng-model="{string}"
 [name="{string}"]
 [min="{string}"]
 [max="{string}"]
 [required]
 [ng-required="{string}"]
 [ng-minlength="{number}"]
 [ng-maxlength="{number}"]
 [ng-pattern="{string}"]
 [ng-change="{string}"]&gt;
</code></pre>

the official doc is here: <a href="http://docs.angularjs.org/api/ng.directive:input.number" rel="noreferrer">http://docs.angularjs.org/api/ng.directive:input.number</a>

blocks|key|230812|text|HTML|type|unstyled|depth|inlineStyleRanges|entityRanges|data|230813|+<input+type="text"+name="number"+only-digits>|code-block|syntax|javascript|230814|//只需键入123|230815|++.directive('onlyDigits',+function+()+{
++++return+{
++++++require:+'ngModel',
++++++restrict:+'A',
++++++link:+function+(scope,+element,+attr,+ctrl)+{
++++++++function+inputValue(val)+{
++++++++++if+(val)+{
++++++++++++var+digits+=+val.replace(/[%5E0-9]/g,+'');

++++++++++++if+(digits+!==+val)+{
++++++++++++++ctrl.$setViewValue(digits);
++++++++++++++ctrl.$render();
++++++++++++}
++++++++++++return+parseInt(digits,10);
++++++++++}
++++++++++return+undefined;
++++++++}++++++++++++
++++++++ctrl.$parsers.push(inputValue);
++++++}
++++};|230816|//类型:+123或123.45|230817|+.directive('onlyDigits',+function+()+{
++++return+{
++++++require:+'ngModel',
++++++restrict:+'A',
++++++link:+function+(scope,+element,+attr,+ctrl)+{
++++++++function+inputValue(val)+{
++++++++++if+(val)+{
++++++++++++var+digits+=+val.replace(/[%5E0-9.]/g,+'');

++++++++++++if+(digits+!==+val)+{
++++++++++++++ctrl.$setViewValue(digits);
++++++++++++++ctrl.$render();
++++++++++++}
++++++++++++return+parseFloat(digits);
++++++++++}
++++++++++return+undefined;
++++++++}++++++++++++
++++++++ctrl.$parsers.push(inputValue);
++++++}
++++};|230818|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

HTML

<pre><code> &lt;input type="text" name="number" only-digits&gt;
</code></pre>

// Just type 123

<pre><code> .directive('onlyDigits', function () {
 return {
 require: 'ngModel',
 restrict: 'A',
 link: function (scope, element, attr, ctrl) {
 function inputValue(val) {
 if (val) {
 var digits = val.replace(/[^0-9]/g, '');

 if (digits !== val) {
 ctrl.$setViewValue(digits);
 ctrl.$render();
 }
 return parseInt(digits,10);
 }
 return undefined;
 } 
 ctrl.$parsers.push(inputValue);
 }
 };
</code></pre>

// type: 123 or 123.45

<pre><code> .directive('onlyDigits', function () {
 return {
 require: 'ngModel',
 restrict: 'A',
 link: function (scope, element, attr, ctrl) {
 function inputValue(val) {
 if (val) {
 var digits = val.replace(/[^0-9.]/g, '');

 if (digits !== val) {
 ctrl.$setViewValue(digits);
 ctrl.$render();
 }
 return parseFloat(digits);
 }
 return undefined;
 } 
 ctrl.$parsers.push(inputValue);
 }
 };
</code></pre>

blocks|key|230688|text|我想要一个可以由min和max属性限制范围的指令，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|230689|<input+type="text"+integer+min="1"+max="10"+/>|230690|所以我写了以下内容：|230691|.directive('integer',+function()+{
++++return+{
++++++++restrict:+'A',
++++++++require:+'?ngModel',
++++++++link:+function(scope,+elem,+attr,+ngModel)+{
++++++++++++if+(!ngModel)
++++++++++++++++return;

++++++++++++function+isValid(val)+{
++++++++++++++++if+(val+===+"")
++++++++++++++++++++return+true;

++++++++++++++++var+asInt+=+parseInt(val,+10);
++++++++++++++++if+(asInt+===+NaN+%7C%7C+asInt.toString()+!==+val)+{
++++++++++++++++++++return+false;
++++++++++++++++}

++++++++++++++++var+min+=+parseInt(attr.min);
++++++++++++++++if+(min+!==+NaN+&&+asInt+<+min)+{
++++++++++++++++++++return+false;
++++++++++++++++}

++++++++++++++++var+max+=+parseInt(attr.max);
++++++++++++++++if+(max+!==+NaN+&&+max+<+asInt)+{
++++++++++++++++++++return+false;
++++++++++++++++}

++++++++++++++++return+true;
++++++++++++}

++++++++++++var+prev+=+scope.$eval(attr.ngModel);
++++++++++++ngModel.$parsers.push(function+(val)+{
++++++++++++++++//+short-circuit+infinite+loop
++++++++++++++++if+(val+===+prev)
++++++++++++++++++++return+val;

++++++++++++++++if+(!isValid(val))+{
++++++++++++++++++++ngModel.$setViewValue(prev);
++++++++++++++++++++ngModel.$render();
++++++++++++++++++++return+prev;
++++++++++++++++}

++++++++++++++++prev+=+val;
++++++++++++++++return+val;
++++++++++++});
++++++++}
++++};
});|code-block|syntax|javascript|230692|entityMap^0|8|3|C|3|0|0|1A|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

I wanted a directive that could be limited in range by <code>min</code> and <code>max</code> attributes like so:

<code>&lt;input type="text" integer min="1" max="10" /&gt;</code>

so I wrote the following:

<pre><code>.directive('integer', function() {
 return {
 restrict: 'A',
 require: '?ngModel',
 link: function(scope, elem, attr, ngModel) {
 if (!ngModel)
 return;

 function isValid(val) {
 if (val === "")
 return true;

 var asInt = parseInt(val, 10);
 if (asInt === NaN || asInt.toString() !== val) {
 return false;
 }

 var min = parseInt(attr.min);
 if (min !== NaN &amp;&amp; asInt &lt; min) {
 return false;
 }

 var max = parseInt(attr.max);
 if (max !== NaN &amp;&amp; max &lt; asInt) {
 return false;
 }

 return true;
 }

 var prev = scope.$eval(attr.ngModel);
 ngModel.$parsers.push(function (val) {
 // short-circuit infinite loop
 if (val === prev)
 return val;

 if (!isValid(val)) {
 ngModel.$setViewValue(prev);
 ngModel.$render();
 return prev;
 }

 prev = val;
 return val;
 });
 }
 };
});
</code></pre>

blocks|key|14283|text|这是我真正的快速下流的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|14284|
<html+ng-app="num">
++<head></head>
++<body+ng-controller="numCtrl">
++++<form+class="digits"+name="digits"+ng-submit="getGrades()"+novalidate+>
++++++<input+type="text"+placeholder="digits+here+plz"+name="nums"+ng-model="nums"+required+ng-pattern="/%5E(\d)%2B$/"+/>
++++++<p+class="alert"+ng-show="digits.nums.$error.pattern">Numbers+only,+please.+
++++++ 
++++++<input+type="text"+placeholder="txt+here+plz"+name="alpha"+ng-model="alpha"+required+ng-pattern="/%5E(\D)%2B$/"+/>
++++++<p+class="alert"+ng-show="digits.alpha.$error.pattern">Text+only,+please.
++++++ 
++++++<input+class="btn"+type="submit"+value="Do+it!"+ng-disabled="!digits.$valid"+/>
++++</form>
++</body>
</html>

//+Javascript+file
var+app+=+angular.module('num',+['ngResource']);
app.controller('numCtrl',+function($scope,+$http){
++$scope.digits+=+{};
});|code-block|syntax|javascript|14285|这要求您包含angular-resource库，以便持久绑定到字段，以便进行验证。|14286|Working+example+here|offset|length|14287|在1.2.0-rc.3%2B中像冠军一样工作。修改正则表达式，您应该已经设置好了。也许是像/%5E(\d%7C\.)%2B$/这样的？像往常一样，在完成后验证服务器端。|style|CODE|14288|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/astockwell/pen/JyCva^0|0|0|0|0|K|0|0|17|C|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@$K|16|L|17|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Here's my really quick-n-dirty one:

<pre><code>&lt;!-- HTML file --&gt;
&lt;html ng-app="num"&gt;
 &lt;head&gt;&lt;/head&gt;
 &lt;body ng-controller="numCtrl"&gt;
 &lt;form class="digits" name="digits" ng-submit="getGrades()" novalidate &gt;
 &lt;input type="text" placeholder="digits here plz" name="nums" ng-model="nums" required ng-pattern="/^(\d)+$/" /&gt;
 &lt;p class="alert" ng-show="digits.nums.$error.pattern"&gt;Numbers only, please.&lt;/p&gt; 
 &lt;br&gt;
 &lt;input type="text" placeholder="txt here plz" name="alpha" ng-model="alpha" required ng-pattern="/^(\D)+$/" /&gt;
 &lt;p class="alert" ng-show="digits.alpha.$error.pattern"&gt;Text only, please.&lt;/p&gt;
 &lt;br&gt;
 &lt;input class="btn" type="submit" value="Do it!" ng-disabled="!digits.$valid" /&gt;
 &lt;/form&gt;
 &lt;/body&gt;
&lt;/html&gt;

// Javascript file
var app = angular.module('num', ['ngResource']);
app.controller('numCtrl', function($scope, $http){
 $scope.digits = {};
});
</code></pre>

This requires you include the angular-resource library for persistent bindings to the fields for validation purposes.

<a href="http://codepen.io/astockwell/pen/JyCva" rel="nofollow">Working example here</a>

Works like a champ in 1.2.0-rc.3+. Modify the regex and you should be all set. Perhaps something like <code>/^(\d|\.)+$/</code> ? As always, validate server-side when you're done.

blocks|key|230848|text|这对我来说似乎是最简单的：http://jsfiddle.net/thomporter/DwKZh/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|230849|(代码不是我的，我偶然发现的)|230850|++++angular.module('myApp',+[]).directive('numbersOnly',+function(){
+++++++return+{
+++++++++require:+'ngModel',
+++++++++link:+function(scope,+element,+attrs,+modelCtrl)+{
+++++++++++modelCtrl.$parsers.push(function+(inputValue)+{
+++++++++++++++//+this+next+if+is+necessary+for+when+using+ng-required+on+your+input.+
+++++++++++++++//+In+such+cases,+when+a+letter+is+typed+first,+this+parser+will+be+called
+++++++++++++++//+again,+and+the+2nd+time,+the+value+will+be+undefined
+++++++++++++++if+(inputValue+==+undefined)+return+''+
+++++++++++++++var+transformedInput+=+inputValue.replace(/[%5E0-9]/g,+'');+
+++++++++++++++if+(transformedInput!=inputValue)+{
++++++++++++++++++modelCtrl.$setViewValue(transformedInput);
++++++++++++++++++modelCtrl.$render();
+++++++++++++++}+++++++++

+++++++++++++++return+transformedInput;+++++++++
+++++++++++});
+++++++++}
+++++++};
++++});|code-block|syntax|javascript|230851|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/thomporter/DwKZh/^0|D|11|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

This one seems the easiest to me:
<a href="http://jsfiddle.net/thomporter/DwKZh/" rel="nofollow">http://jsfiddle.net/thomporter/DwKZh/</a>

(Code is not mine, I accidentally stumbled upon it)

<pre><code> angular.module('myApp', []).directive('numbersOnly', function(){
 return {
 require: 'ngModel',
 link: function(scope, element, attrs, modelCtrl) {
 modelCtrl.$parsers.push(function (inputValue) {
 // this next if is necessary for when using ng-required on your input. 
 // In such cases, when a letter is typed first, this parser will be called
 // again, and the 2nd time, the value will be undefined
 if (inputValue == undefined) return '' 
 var transformedInput = inputValue.replace(/[^0-9]/g, ''); 
 if (transformedInput!=inputValue) {
 modelCtrl.$setViewValue(transformedInput);
 modelCtrl.$render();
 } 

 return transformedInput; 
 });
 }
 };
 });
</code></pre>

blocks|key|14564|text|我修改了Alan上面的答案，将数字限制为指定的最小/最大值。如果您输入一个超出范围的数字，它将在1500毫秒后设置最小值或最大值。如果完全清除该字段，则不会设置任何内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|14565|HTML：|14566|<input+type="text"+ng-model="employee.age"+min="18"+max="99"+valid-number+/>|code-block|syntax|javascript|14567|Javascript：|14568|var+app+=+angular.module('myApp',+[]);

app.controller('MainCtrl',+function($scope)+{});

app.directive('validNumber',+function($timeout)+{
++++return+{
++++++++require:+'?ngModel',
++++++++link:+function(scope,+element,+attrs,+ngModelCtrl)+{
++++++++++++if+(!ngModelCtrl)+{
++++++++++++++++return;
++++++++++++}

++++++++++++var+min+=+%2Battrs.min;
++++++++++++var+max+=+%2Battrs.max;
++++++++++++var+lastValue+=+null;
++++++++++++var+lastTimeout+=+null;
++++++++++++var+delay+=+1500;

++++++++++++ngModelCtrl.$parsers.push(function(val)+{
++++++++++++++++if+(angular.isUndefined(val))+{
++++++++++++++++++++val+=+'';
++++++++++++++++}++++++++++++

++++++++++++++++if+(lastTimeout)+{
++++++++++++++++++++$timeout.cancel(lastTimeout);
++++++++++++++++}

++++++++++++++++if+(!lastValue)+{
++++++++++++++++++++lastValue+=+ngModelCtrl.$modelValue;
++++++++++++++++}

++++++++++++++++if+(val.length)+{
++++++++++++++++++++var+value+=+%2Bval;
++++++++++++++++++++var+cleaned+=+val.replace(+/[%5E0-9]%2B/g,+'');+

++++++++++++++++++++//+This+has+no+non-numeric+characters
++++++++++++++++++++if+(val.length+===+cleaned.length)+{
++++++++++++++++++++++++var+clean+=+%2Bcleaned;

++++++++++++++++++++++++if+(clean+<+min)+{
++++++++++++++++++++++++++++clean+=+min;
++++++++++++++++++++++++}+else+if+(clean+>+max)+{
++++++++++++++++++++++++++++clean+=+max;
++++++++++++++++++++++++}

++++++++++++++++++++++++if+(value+!==+clean+%7C%7C+value+!==+lastValue)+{
++++++++++++++++++++++++++++lastTimeout+=+$timeout(function+()+{
++++++++++++++++++++++++++++++++lastValue+=+clean;
++++++++++++++++++++++++++++++++ngModelCtrl.$setViewValue(clean);
++++++++++++++++++++++++++++++++ngModelCtrl.$render();
++++++++++++++++++++++++++++},+delay);
++++++++++++++++++++++++}
++++++++++++++++++++//+This+has+non-numeric+characters,+filter+them+out
++++++++++++++++++++}+else+{
++++++++++++++++++++++++ngModelCtrl.$setViewValue(lastValue);
++++++++++++++++++++++++ngModelCtrl.$render();
++++++++++++++++++++}
++++++++++++++++}

++++++++++++++++return+lastValue;
++++++++++++});

++++++++++++element.bind('keypress',+function(event)+{
++++++++++++++++if+(event.keyCode+===+32)+{
++++++++++++++++++++event.preventDefault();
++++++++++++++++}
++++++++++++});

++++++++++++element.on('$destroy',+function+()+{
++++++++++++++++element.unbind('keypress');
++++++++++++});
++++++++}
++++};
});|14569|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I modified Alan's answer above to restrict the number to the specified min/max. If you enter a number outside the range, it will set the min or max value after 1500ms. If you clear the field completely, it will not set anything.

HTML:

<pre><code>&lt;input type="text" ng-model="employee.age" min="18" max="99" valid-number /&gt;
</code></pre>

Javascript:

<pre><code>var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {});

app.directive('validNumber', function($timeout) {
 return {
 require: '?ngModel',
 link: function(scope, element, attrs, ngModelCtrl) {
 if (!ngModelCtrl) {
 return;
 }

 var min = +attrs.min;
 var max = +attrs.max;
 var lastValue = null;
 var lastTimeout = null;
 var delay = 1500;

 ngModelCtrl.$parsers.push(function(val) {
 if (angular.isUndefined(val)) {
 val = '';
 } 

 if (lastTimeout) {
 $timeout.cancel(lastTimeout);
 }

 if (!lastValue) {
 lastValue = ngModelCtrl.$modelValue;
 }

 if (val.length) {
 var value = +val;
 var cleaned = val.replace( /[^0-9]+/g, ''); 

 // This has no non-numeric characters
 if (val.length === cleaned.length) {
 var clean = +cleaned;

 if (clean &lt; min) {
 clean = min;
 } else if (clean &gt; max) {
 clean = max;
 }

 if (value !== clean || value !== lastValue) {
 lastTimeout = $timeout(function () {
 lastValue = clean;
 ngModelCtrl.$setViewValue(clean);
 ngModelCtrl.$render();
 }, delay);
 }
 // This has non-numeric characters, filter them out
 } else {
 ngModelCtrl.$setViewValue(lastValue);
 ngModelCtrl.$render();
 }
 }

 return lastValue;
 });

 element.bind('keypress', function(event) {
 if (event.keyCode === 32) {
 event.preventDefault();
 }
 });

 element.on('$destroy', function () {
 element.unbind('keypress');
 });
 }
 };
});
</code></pre>

blocks|key|14448|text|从gordy的答案扩展：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|14449|顺便说一句，干得好。但是它也允许%2B在前面。这将删除它。|14450|++++scope.$watch('inputValue',+function+(newValue,+oldValue)+{
++++++++var+arr+=+String(newValue).split("");
++++++++if+(arr.length+===+0)+return;
++++++++if+(arr.length+===+1+&&+(arr[0]+==+'-'+%7C%7C+arr[0]+===+'.'))+return;
++++++++if+(arr.length+===+2+&&+newValue+===+'-.')+return;
++++++++if+(isNaN(newValue))+{
++++++++++++scope.inputValue+=+oldValue;
++++++++}
++++++++if+(arr.length+>+0)+{
++++++++++++if+(arr[0]+===+"%2B")+{
++++++++++++++++scope.inputValue+=+oldValue;
++++++++++++}
++++++++}
++++});|code-block|syntax|javascript|14451|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Expanding from gordy's answer:

Good job btw. But it also allowed + in the front. This will remove it.

<pre><code> scope.$watch('inputValue', function (newValue, oldValue) {
 var arr = String(newValue).split("");
 if (arr.length === 0) return;
 if (arr.length === 1 &amp;&amp; (arr[0] == '-' || arr[0] === '.')) return;
 if (arr.length === 2 &amp;&amp; newValue === '-.') return;
 if (isNaN(newValue)) {
 scope.inputValue = oldValue;
 }
 if (arr.length &gt; 0) {
 if (arr[0] === "+") {
 scope.inputValue = oldValue;
 }
 }
 });
</code></pre>

blocks|key|230939|text|下面是一个派生函数，它还将阻止小数点输入两次|type|unstyled|depth|inlineStyleRanges|entityRanges|data|230940|HTML|230941|++++<input+tabindex="1"+type="text"+placeholder=""+name="salary"+id="salary"+data-ng-model="salary"+numbers-only="numbers-only"+required="required">|code-block|syntax|javascript|230942|角度|230943|++++var+app+=+angular.module("myApp",+[]);

++++app.directive('numbersOnly',+function()+{
++++return+{
++++++++++++require+:+'ngModel',+link+:+function(scope,+element,+attrs,++modelCtrl)+{
++++++++modelCtrl.$parsers.push(function(inputValue)+{

++++++++++++if+(inputValue+==+undefined)+{
++++++++++++++++return+'';+//If+value+is+required
++++++++++++}

++++++++++++//+Regular+expression+for+everything+but+[.]+and+[1+-+10]+(Replace+all)
++++++++++++var+transformedInput+=+inputValue.replace(/[a-z!@#$%25%5E&*()_%2B\-=\[\]{};':"\\%7C,<>\/?]/g,+'');

++++++++++++//+Now+to+prevent+duplicates+of+decimal+point
++++++++++++var+arr+=+transformedInput.split('');

++++++++++++count+=+0;+//decimal+counter
++++++++++++for+(+var+i+=+0;+i+<+arr.length;+i%2B%2B)+{
++++++++++++++++if+(arr[i]+==+'.')+{
++++++++++++++++++++count%2B%2B;+//++how+many+do+we+have?+increment
++++++++++++++++}
++++++++++++}

++++++++++++//+if+we+have+more+than+1+decimal+point,+delete+and+leave+only+one+at+the+end
++++++++++++while+(count+>+1)+{
++++++++++++++++for+(+var+i+=+0;+i+<+arr.length;+i%2B%2B)+{
++++++++++++++++++++if+(arr[i]+==+'.')+{
++++++++++++++++++++++++arr[i]+=+'';
++++++++++++++++++++++++count+=+0;
++++++++++++++++++++++++break;
++++++++++++++++++++}
++++++++++++++++}
++++++++++++}

++++++++++++//+convert+the+array+back+to+string+by+relacing+the+commas
++++++++++++transformedInput+=+arr.toString().replace(/,/g,+'');

++++++++++++if+(transformedInput+!=+inputValue)+{
++++++++++++++++modelCtrl.$setViewValue(transformedInput);
++++++++++++++++modelCtrl.$render();
++++++++++++}

++++++++++++return+transformedInput;
++++++++});
++++}
};
});|230944|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here is a derivative that will also block the decimal point to be entered twice

HTML

<pre><code> &lt;input tabindex="1" type="text" placeholder="" name="salary" id="salary" data-ng-model="salary" numbers-only="numbers-only" required="required"&gt;
</code></pre>

Angular

<pre><code> var app = angular.module("myApp", []);

 app.directive('numbersOnly', function() {
 return {
 require : 'ngModel', link : function(scope, element, attrs, modelCtrl) {
 modelCtrl.$parsers.push(function(inputValue) {

 if (inputValue == undefined) {
 return ''; //If value is required
 }

 // Regular expression for everything but [.] and [1 - 10] (Replace all)
 var transformedInput = inputValue.replace(/[a-z!@#$%^&amp;*()_+\-=\[\]{};':"\\|,&lt;&gt;\/?]/g, '');

 // Now to prevent duplicates of decimal point
 var arr = transformedInput.split('');

 count = 0; //decimal counter
 for ( var i = 0; i &lt; arr.length; i++) {
 if (arr[i] == '.') {
 count++; // how many do we have? increment
 }
 }

 // if we have more than 1 decimal point, delete and leave only one at the end
 while (count &gt; 1) {
 for ( var i = 0; i &lt; arr.length; i++) {
 if (arr[i] == '.') {
 arr[i] = '';
 count = 0;
 break;
 }
 }
 }

 // convert the array back to string by relacing the commas
 transformedInput = arr.toString().replace(/,/g, '');

 if (transformedInput != inputValue) {
 modelCtrl.$setViewValue(transformedInput);
 modelCtrl.$render();
 }

 return transformedInput;
 });
 }
};
});
</code></pre>

blocks|key|14683|text|扩展Adam+Thomas+answer您可以通过使用自定义regexp添加输入参数，轻松地使此指令更通用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|14684|var+app+=+angular.module('myApp',+[]);

app.controller('MainCtrl',+function($scope)+{
});

app.directive('validInput',+function()+{
++return+{
++++require:+'?ngModel',
++++scope:+{
++++++"inputPattern":+'@'
++++},
++++link:+function(scope,+element,+attrs,+ngModelCtrl)+{

++++++var+regexp+=+null;

++++++if+(scope.inputPattern+!==+undefined)+{
++++++++regexp+=+new+RegExp(scope.inputPattern,+"g");
++++++}

++++++if(!ngModelCtrl)+{
++++++++return;
++++++}

++++++ngModelCtrl.$parsers.push(function(val)+{
++++++++if+(regexp)+{
++++++++++var+clean+=+val.replace(regexp,+'');
++++++++++if+(val+!==+clean)+{
++++++++++++ngModelCtrl.$setViewValue(clean);
++++++++++++ngModelCtrl.$render();
++++++++++}
++++++++++return+clean;
++++++++}
++++++++else+{
++++++++++return+val;
++++++++}

++++++});

++++++element.bind('keypress',+function(event)+{
++++++++if(event.keyCode+===+32)+{
++++++++++event.preventDefault();
++++++++}
++++++});
++++}
}});|code-block|syntax|javascript|14685|HTML|14686|<input+type="text"+ng-model="employee.age"+valid-input++
+++++++input-pattern="[%5E0-9]%2B"+placeholder="Enter+an+age"+/>
</label>|14687|在CodePen上直播|offset|length|14688|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/LEagVK^0|0|0|0|0|1|7|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Extending Adam Thomas answer you can easily make this directive more generic by adding input argument with custom regexp:

<pre><code>var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
});

app.directive('validInput', function() {
 return {
 require: '?ngModel',
 scope: {
 "inputPattern": '@'
 },
 link: function(scope, element, attrs, ngModelCtrl) {

 var regexp = null;

 if (scope.inputPattern !== undefined) {
 regexp = new RegExp(scope.inputPattern, "g");
 }

 if(!ngModelCtrl) {
 return;
 }

 ngModelCtrl.$parsers.push(function(val) {
 if (regexp) {
 var clean = val.replace(regexp, '');
 if (val !== clean) {
 ngModelCtrl.$setViewValue(clean);
 ngModelCtrl.$render();
 }
 return clean;
 }
 else {
 return val;
 }

 });

 element.bind('keypress', function(event) {
 if(event.keyCode === 32) {
 event.preventDefault();
 }
 });
 }
}});
</code></pre>

HTML

<pre><code>&lt;input type="text" ng-model="employee.age" valid-input 
 input-pattern="[^0-9]+" placeholder="Enter an age" /&gt;
&lt;/label&gt;
</code></pre>

Live on <a href="http://codepen.io/anon/pen/LEagVK" rel="nofollow">CodePen</a>

blocks|key|231063|text|小数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|231064|directive('decimal',+function()+{
++++++++++++++++return+{
++++++++++++++++++++require:+'ngModel',
++++++++++++++++++++restrict:+'A',
++++++++++++++++++++link:+function(scope,+element,+attr,+ctrl)+{
++++++++++++++++++++++++function+inputValue(val)+{
++++++++++++++++++++++++++++if+(val)+{
++++++++++++++++++++++++++++++++var+digits+=+val.replace(/[%5E0-9.]/g,+'');

++++++++++++++++++++++++++++++++if+(digits.split('.').length+>+2)+{
++++++++++++++++++++++++++++++++++++digits+=+digits.substring(0,+digits.length+-+1);
++++++++++++++++++++++++++++++++}

++++++++++++++++++++++++++++++++if+(digits+!==+val)+{
++++++++++++++++++++++++++++++++++++ctrl.$setViewValue(digits);
++++++++++++++++++++++++++++++++++++ctrl.$render();
++++++++++++++++++++++++++++++++}
++++++++++++++++++++++++++++++++return+parseFloat(digits);
++++++++++++++++++++++++++++}
++++++++++++++++++++++++++++return+"";
++++++++++++++++++++++++}
++++++++++++++++++++++++ctrl.$parsers.push(inputValue);
++++++++++++++++++++}
++++++++++++++++};
++++++++++++});|code-block|syntax|javascript|231065|位数|231066|directive('entero',+function()+{
++++++++++++return+{
++++++++++++++++require:+'ngModel',
++++++++++++++++restrict:+'A',
++++++++++++++++link:+function(scope,+element,+attr,+ctrl)+{
++++++++++++++++++++function+inputValue(val)+{
++++++++++++++++++++++++if+(val)+{
++++++++++++++++++++++++++++var+value+=+val+%2B+'';+//convert+to+string
++++++++++++++++++++++++++++var+digits+=+value.replace(/[%5E0-9]/g,+'');

++++++++++++++++++++++++++++if+(digits+!==+value)+{
++++++++++++++++++++++++++++++++ctrl.$setViewValue(digits);
++++++++++++++++++++++++++++++++ctrl.$render();
++++++++++++++++++++++++++++}
++++++++++++++++++++++++++++return+parseInt(digits);
++++++++++++++++++++++++}
++++++++++++++++++++++++return+"";
++++++++++++++++++++}
++++++++++++++++++++ctrl.$parsers.push(inputValue);
++++++++++++++++}
++++++++++++};
++++++++});|231067|angular+directives+for+validate+numbers|offset|length|231068|entityMap|0|LINK|mutability|MUTABLE|url|http://aandresdev.blogspot.pe/2017/01/angular-directivas-para-validar-input.html^0|0|0|0|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

DECIMAL 

<pre><code>directive('decimal', function() {
 return {
 require: 'ngModel',
 restrict: 'A',
 link: function(scope, element, attr, ctrl) {
 function inputValue(val) {
 if (val) {
 var digits = val.replace(/[^0-9.]/g, '');

 if (digits.split('.').length &gt; 2) {
 digits = digits.substring(0, digits.length - 1);
 }

 if (digits !== val) {
 ctrl.$setViewValue(digits);
 ctrl.$render();
 }
 return parseFloat(digits);
 }
 return "";
 }
 ctrl.$parsers.push(inputValue);
 }
 };
 });
</code></pre>

DIGITS

<pre><code>directive('entero', function() {
 return {
 require: 'ngModel',
 restrict: 'A',
 link: function(scope, element, attr, ctrl) {
 function inputValue(val) {
 if (val) {
 var value = val + ''; //convert to string
 var digits = value.replace(/[^0-9]/g, '');

 if (digits !== value) {
 ctrl.$setViewValue(digits);
 ctrl.$render();
 }
 return parseInt(digits);
 }
 return "";
 }
 ctrl.$parsers.push(inputValue);
 }
 };
 });
</code></pre>

<a href="http://aandresdev.blogspot.pe/2017/01/angular-directivas-para-validar-input.html" rel="nofollow noreferrer">angular directives for validate numbers</a>

I am new to angularjs. I am wondering what is the way to allow only a valid number typed into a textbox.
For example, user can type in "1.25", but cannot type in "1.a" or "1..". When user try to type in the next character which will make it an invalid number, he cannot type it in.

Thanks in advance.

How to allow only a number (digits and decimal point) to be typed in an input?

服务器

我是第一次接触angularjs。我想知道怎样才能只允许在文本框中输入有效的数字。例如，用户可以键入"1.25"，但不能键入"1.a“或"1..”。当用户试图键入下一个字符时，这将使它成为无效的数字，他无法键入它。提前谢谢。

问如何在输入中只允许键入一个数字(数字和小数点)？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在输入中只允许键入一个数字(数字和小数点)？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在输入中只允许键入一个数字(数字和小数点)？
EN