ui-mask, 在输入字段上屏蔽,以便用户只能输入预先确定的Pattern

分享于 

8分钟阅读

GitHub

  繁體 雙語
Mask on an input field so the user can only type pre-determined pattern
  • 源代码名称:ui-mask
  • 源代码网址:http://www.github.com/angular-ui/ui-mask
  • ui-mask源代码文档
  • ui-mask源代码下载
  • Git URL:
    git://www.github.com/angular-ui/ui-mask.git
    Git Clone代码到本地:
    git clone http://www.github.com/angular-ui/ui-mask
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/angular-ui/ui-mask
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    用户界面掩码 Build Statusnpm versionBower versionJoin the chat at https://gitter.im/angular-ui/ui-mask

    在输入字段上应用掩码,以便用户只能输入预先确定的Pattern。

    要求

    • AngularJS

    用法

    Bower

    你可以从 Bower 获得它。

    bower install angular-ui-mask

    加载应用程序中的脚本文件:

    <scripttype="text/javascript"src="bower_components/angular/angular.js"></script>
    <scripttype="text/javascript"src="bower_components/angular-ui-mask/dist/mask.js"></script>

    将特定的MODULE 添加到你的依赖项:

    angular.module('myApp', ['ui.mask', ...])

    ) ( CommonJS,ES6模块)。

    你也可以使用它作为CommonJS或者 ES6 MODULE 与任何支持这些模块类型的构建系统:

    npm install angular-ui-mask

    然后将它的包含在

    // CommonJSvar uiMask =require('angular-ui-mask');angular.module('myApp', [uiMask, ...]);
    // ES6 moduleimportuiMaskfrom'angular-ui-mask';angular.module('myApp', [uiMask, ...]);

    定制

    你可以通过利用 ui-options 对象来定制ui掩码的几个行为。 将 ui-options 声明为在声明 ui-mask的同一元素上的附加属性。

    ui-options 内部,你可以自定义这五个属性:

    • maskDefinitions - 默认值: { '9':/d/, 'A':/[a-zA-Z]/, '*':/[a-zA-Z0-9]/} ,
    • clearOnBlur - 默认值:true
    • clearOnBlurPlaceholder - 默认值:false
    • eventsToHandle - 默认值: ['input', 'keyup', 'click', 'focus']
    • addDefaultPlaceholder - 默认值:true
    • escChar - 默认值:''
    • allowInvalidValue - 默认值:false

    在自定义 eventsToHandleclearOnBlur 或者 addDefaultPlaceholder 时,你提供的值将替换默认值。 要自定义 eventsToHandle,请确保替换整个 array。

    maskDefinitions 是一个对象,因此你提供的任何定制对象都将使用 angular.extend() 合并在一起。 这允许你选择性地覆盖缺省值,如果你希望。

    clearOnBlurPlaceholder 设置为 true 时,它将显示占位符文本而不是空掩码。 它需要在输入上设置 ui-mask-placeholder 属性才能正确显示。

    如果在掩码中遇到 escChar ( 默认情况),下一个字符将被视为文字,而不是掩码定义键。 要完全禁用 escChar 功能,请将 escChar 设置为 null

    allowInvalidValue 设置为 true 时,即使它不是有效的,也应将值应用到 $modelValue。 默认情况下,如果写入的值无效,模型将保留为 undefined

    全局自定义

    除了定制特定元素的行为之外,你还可以在全局上定制行为。 为此,只需在应用程序配置中使用 uiMaskConfig 提供程序。 例如:

    app.config(['uiMask.ConfigProvider', function(uiMaskConfigProvider) {
     uiMaskConfigProvider.maskDefinitions({'A':/[a-z]/, '*':/[a-zA-Z0-9]/});
     uiMaskConfigProvider.clearOnBlur(false);
     uiMaskConfigProvider.eventsToHandle(['input', 'keyup', 'click']);
    }
    maskDefinitions

    maskDefinitions 中的键表示掩码声明中使用的特殊标记/字符来分隔可以接受的输入范围。 例如我们使用'9'来接受电话号码的任何数值: ui-mask="(999) 999-9999" 与每个令牌关联的值是 regexen。 每个 正规表达式 定义了可以接受的值范围,作为该标记位置的输入。

    modelViewValue

    如果设置为 true,则与 ng-model 绑定的模型值将与 $viewValue 相同,这意味着它将包含掩码定义中的任何 static 掩码字符。 这将不会将模型值设置为无效的$viewValue

    uiMaskPlaceholder

    允许用户在用户集中输入输入元素并键入它的值时自定义掩码占位符

    uiMaskPlaceholderChar

    允许自定义掩码占位符字符。 默认掩码占位符为 _

    如果希望占位符字符为空白,请将这里属性设置为单词 space

    addDefaultPlaceholder

    默认占位符是从 ui-mask 定义构造的,因此 999-9999的掩码将具有 ___-____的默认占位符,除非你重写默认占位符字符。

    测试

    大多数测试使用 Karma 进行测试,运行测试和SauceLabs来提供不同的浏览器环境来测试测试。

    移动测试和调试使用BrowserStack从浏览器远程调试移动设备的能力。

    BrowserStack

    插件开发

    我们使用 Karma 和jshint来保证代码的质量。 运行这些检查的最简单方法是使用吞咽:

    npm install -g gulp-cli
    npm install && bower install
    gulp

    Karma 任务将尝试打开 Firefox 和 Chrome 作为浏览器,在其中运行测试。 确保这里选项可用或者更改 karma.conf.js 中的配置

    Gulp

    gulp watch 将自动测试你的代码并在源文件发生更改时生成一个版本。

    :如何发布

    使用 gulp bump版本,生成并创建标签。 然后推送到 GitHub:

    gulp release [--patch|--minor|--major]
    git push --tags origin master # push everything to GitHub

    Travis将负责测试和发布到 npm ( Bower 将自动获取更改)的注册表。 最后,在GitHub上创建一个发布,来自Travis的标记创建。


    USE  用户  PRE  type  pattern  输入  
    相关文章