首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将输入限制为只接受数字?

如何将输入限制为只接受数字?
EN

Stack Overflow用户
提问于 2013-01-31 06:38:20
回答 12查看 206.7K关注 0票数 94

我在AngularJS中使用ngChange来触发一个自定义函数,该函数将删除用户添加到输入中的任何字母。

代码语言:javascript
复制
<input type="text" name="inputName" data-ng-change="numbersOnly()"/>

问题是我需要以触发numbersOnly()的输入为目标,这样我就可以删除输入的字母。我在谷歌上找了很长时间,也找不到任何关于这方面的东西。

我能做什么?

EN

回答 12

Stack Overflow用户

发布于 2014-02-28 15:23:09

在文本字段上使用ng-pattern

代码语言:javascript
复制
<input type="text"  ng-model="myText" name="inputName" ng-pattern="onlyNumbers">

然后在你的控制器上包含这个

代码语言:javascript
复制
$scope.onlyNumbers = /^\d+$/;
票数 66
EN

Stack Overflow用户

发布于 2016-10-11 16:35:53

这是一个很好的解决方案,可以使input只允许输入数字

代码语言:javascript
复制
<input type="text" ng-model="myText" name="inputName" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
票数 6
EN

Stack Overflow用户

发布于 2016-02-05 18:59:54

这里是一个处理上述任何情况的Plunker,请勿处理。

通过使用$formatters和$parsers流水线,避免type=“编号”

这里是问题/解决方案的解释(也可以在柱塞中找到):

代码语言:javascript
复制
/*
 *
 * Limit input text for floating numbers.
 * It does not display characters and can limit the Float value to X numbers of integers and X numbers of decimals.
 * min and max attributes can be added. They can be Integers as well as Floating values.
 *
 * value needed    |    directive
 * ------------------------------------
 * 55              |    max-integer="2"
 * 55.55           |    max-integer="4" decimal="2" (decimals are substracted from total length. Same logic as database NUMBER type)
 *
 *
 * Input type="number" (HTML5)
 *
 * Browser compatibility for input type="number" :
 * Chrome : - if first letter is a String : allows everything
 *          - if first letter is a Integer : allows [0-9] and "." and "e" (exponential)
 * Firefox : allows everything
 * Internet Explorer : allows everything
 *
 * Why you should not use input type="number" :
 * When using input type="number" the $parser pipeline of ngModel controller won't be able to access NaN values.
 * For example : viewValue = '1e'  -> $parsers parameter value = "".
 * This is because undefined values are not allowes by default (which can be changed, but better not do it)
 * This makes it impossible to modify the view and model value; to get the view value, pop last character, apply to the view and return to the model.
 *
 * About the ngModel controller pipelines :
 * view value -> $parsers -> model value
 * model value -> $formatters -> view value
 *
 * About the $parsers pipeline :
 * It is an array of functions executed in ascending order.
 * When used with input type="number" :
 * This array has 2 default functions, one of them transforms the datatype of the value from String to Number.
 * To be able to change the value easier (substring), it is better to have access to a String rather than a Number.
 * To access a String, the custom function added to the $parsers pipeline should be unshifted rather than pushed.
 * Unshift gives the closest access to the view.
 *
 * About the $formatters pipeline :
 * It is executed in descending order
 * When used with input type="number"
 * Default function transforms the value datatype from Number to String.
 * To access a String, push to this pipeline. (push brings the function closest to the view value)
 *
 * The flow :
 * When changing ngModel where the directive stands : (In this case only the view has to be changed. $parsers returns the changed model)
 *     -When the value do not has to be modified :
 *     $parsers -> $render();
 *     -When the value has to be modified :
 *     $parsers(view value) --(does view needs to be changed?) -> $render();
 *       |                                  |
 *       |                     $setViewValue(changedViewValue)
 *       |                                  |
 *       --<-------<---------<--------<------
 *
 * When changing ngModel where the directive does not stand :
 *     - When the value does not has to be modified :
 *       -$formatters(model value)-->-- view value
 *     -When the value has to be changed
 *       -$formatters(model vale)-->--(does the value has to be modified) -- (when loop $parsers loop is finished, return modified value)-->view value
 *                                              |
 *                                  $setViewValue(notChangedValue) giving back the non changed value allows the $parsers handle the 'bad' value
 *                                               |                  and avoids it to think the value did not changed
 *                Changed the model <----(the above $parsers loop occurs)
 *
 */
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14615236

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档