在前端开发中，我们经常需要对输入框进行格式化，如数字格式化、电话号码格式化、日期格式化等等。在这种情况下，npm package里的angular-masks是一个非常好的选择，它可以让我们轻松地为输入框添加各种格式。
什么是angular-masks？
angular-masks是一个基于AngularJS的input mask模块，支持各种类型的输入框格式化，如电话号码或邮政编码格式化、日期格式化等等，对于前端工程师，它是一个非常实用的工具。
angular-masks的安装
你可以通过npm来安装angular-masks。
npm install angular-masks --save
使用angular-masks
在你的AngularJS应用程序中，你需要将angular-masks添加为依赖，然后就可以使用directive来对输入框进行格式化了。
首先，让我们看一下如何对电话号码进行格式化。
<input type="text" ng-model="phone" mask="(999) 999-9999">
在这个例子中，我们使用了mask指令来对电话号码进行格式化，使用的格式是"(999) 999-9999"，这将导致输入框中的值呈现为"(xxx) xxx-xxxx"的形式。
让我们再看一个例子，如何对日期进行格式化。
<input type="text" ng-model="date" mask="9999/99/99">
这个例子的格式是"9999/99/99"，这将导致输入框中的值呈现为"yyyy/MM/dd"形式的日期格式。
在这些示例中，我们只是简单地演示了如何使用angular-masks，但是它确实有很多功能和选项可供使用。比如，在电话号码格式化的例子中，如果你想将所有非数字字符替换成空格，你可以这样做：
<input type="text" ng-model="phone" mask="(999) 999-9999" restrict="reject">
这个例子中，我们添加了"restrict"选项，它的值是"reject"，这将导致所有非数字字符被替换成空格。
另外，如果你想在日期格式化中添加其他分隔符，你也可以这样做：
<input type="text" ng-model="date" mask="9999-99-99" clearOnBlur="false">
在这个例子中，我们添加了一个"-"分隔符，同时在选项中指定了clearOnBlur为"false"，这将导致输入框中的值保留原始格式，而不是在失去焦点时自动清除。
结论
angular-masks是一个非常实用的工具，它能够让我们轻松地对输入框进行各种格式化，从而提高前端开发的效率。在使用angular-masks时，我们需要根据自己业务的需求来选择不同的格式化类型和选项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005519581e8991b448ceeed