vue掩码处理_基于受限输入的vue.js输入掩码库

vue掩码处理

限制输入 (Restricted Input)

Allow restricted character sets in input elements.

在输入元素中允许使用受限制的字符集。

View Demo 查看演示 View Github 查看Github

特征 (Features)

• Disallow arbitrary characters based on patterns

  禁止基于模式的任意字符

• Maintains caret position

  保持插入符号位置

• Format/Update on paste

  粘贴时格式化/更新

• Works in IE11+

  可以在IE11 +中使用

发展历程 (Development)

Install dependencies

安装依赖

nvm use # if you have node version manager installed
npm i

Watch files and run demo server

观看文件并运行演示服务器

npm run development

This will start a server on port 3099 which can be overridden with the PORT env var.

这将在端口3099上启动服务器，该服务器可以被PORT env var覆盖。

Unit tests

单元测试

The following command will run the linting task and the unit tests.

以下命令将运行linting任务和单元测试。

npm test

Integration tests

整合测试

We use Browserstack to automate end to end testing on Google Chrome, Safari, Firefox, Microsoft Edge, and Internet Explorer 11.

我们使用Browserstack来自动化在Google Chrome，Safari，Firefox，Microsoft Edge和Internet Explorer 11上的端到端测试。

First, sign up for a free open source Browserstack account.

首先， 注册一个免费的开源Browserstack帐户 。

Copy the .env.example file to .env

将.env.example文件复制到.env

cp .env.example .env

Fill in the BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY environmental variables with your credentials:

使用您的凭据填写BROWSERSTACK_USERNAME和BROWSERSTACK_ACCESS_KEY环境变量：

BROWSERSTACK_USERNAME=username
BROWSERSTACK_ACCESS_KEY=access_key

To run the integration tests in Safari, Google Chrome, Firefox, IE11 and Microsoft Edge:

要在Safari，Google Chrome，Firefox，IE11和Microsoft Edge中运行集成测试，请执行以下操作：

npm run development # in another terminal window
npm run test:integration

To run tests in only one browser, prefix the test command with an ONLY_BROWSERS env variable:

要仅在一个浏览器中运行测试，请在测试命令前添加ONLY_BROWSERS env变量：

# run only in edge browser
ONLY_BROWSERS=edge npm run test:integration

# run only in chrome browser
ONLY_BROWSERS=chrome npm run test:integration

# run only in ie 11 browser
ONLY_BROWSERS=ie npm run test:integration

# run only in safari browser
ONLY_BROWSERS=safari npm run test:integration

# run only in firefox browser
ONLY_BROWSERS=firefox npm run test:integration

To run tests in certain browsers, prefix the test command with an ONLY_BROWSERS env variable, with each browser comma separated:

要在某些浏览器中运行测试，请在测试命令前添加ONLY_BROWSERS env变量，并用逗号分隔每个浏览器：

# run only in edge and chrome browsers
ONLY_BROWSERS=edge,chrome npm run test:integration

To run only certain tests, add the .only property before running the test:

要仅运行某些测试，请在运行测试之前添加.only属性：

it.only('does something', function () {

用法 (Usage)

import RestrictedInput from 'restricted-input';

const formattedCreditCardInput = new RestrictedInput({
  element: document.querySelector('#credit-card'),
  pattern: '{{9999}} {{9999}} {{9999}} {{9999}}'
});

模式 (Patterns)

Patterns are a mixture of Placeholders and PermaChars.

模式是Placeholder和PermaChar的混合。

占位符 (Placeholder)

A Placeholder is the part of the pattern that accepts user input based on some restrictions. A placeholder is defined in the pattern using two open curly brackets, the placeholder, followed by two closing curly brackets e.g. {{Abc123}}.

Placeholder是模式的一部分，它根据一些限制接受用户输入。 在模式中使用占位符定义两个占位符，占位符，后跟两个闭合花括号，例如{{Abc123}} 。

The patterns a Placeholder can be are:

Placeholder可以是的模式是：

• a single alpha character that matches the alpha regex /[A-Za-z]/. e.g. {{C}} will match one alpha character.

  与alpha regex /[A-Za-z]/匹配的单个alpha字符。 例如{{C}}将匹配一个字母字符。

• a single digit that matches the digit regex /[0-9]/. e.g. {{3}} will match one digit.

  与数字正则表达式/[0-9]/匹配的一个数字。 例如{{3}}将匹配一位数字。

• a * character that matches /./. e.g. {{*}} will match the next character.

  与/./匹配的*字符。 例如{{*}}将匹配下一个字符。

永久字符 (PermaChar)

A PermaChar is the part of the pattern that is automatically inserted. PermaChars are defined in the pattern as any characters other than Placeholders.

PermaChar是自动插入的模式的一部分。 PermaChar定义为除Placeholder的任何其他字符。

模式范例 (Example patterns)

Some example patterns with behavior are listed:

列出了一些具有行为的示例模式：

• 12{{3}}

  12{{3}}

  • 12.12 。
  • Waits for a single digit from the user.
    等待用户的一位数字。

• {{A}}BC

  {{A}}BC

  • Waits for a single alpha from the user.
    等待来自用户的单个Alpha。
  • BC.BC 。

• ${{*2L}}E

  ${{*2L}}E

  • $.$ 。
  • Waits for any single character input from the user.
    等待用户输入任何单个字符。
  • Waits for a single digit from the user.
    等待用户的一位数字。
  • Waits for a single alpha from the user.
    等待来自用户的单个Alpha。
  • E.E

粘贴事件 (Paste Event)

If an input is changed via a paste event, you may want to adjust the pattern before input formatting occurs. In this case, pass an onPasteEvent callback:

如果通过粘贴事件更改了输入，则可能需要在发生输入格式化之前调整模式。 在这种情况下，传递一个onPasteEvent回调：

const formattedCreditCardInput = new RestrictedInput({
  element: document.querySelector('#credit-card'),
  pattern: '{{9999}} {{9999}} {{9999}} {{9999}}',
  onPasteEvent: function (payload) {
    var value = payload.unformattedInputValue;

    if (requiresAmexPattern(value)) {
      formattedCreditCardInput.setPattern('{{9999}} {{999999}} {{99999}}')
    } else {
      formattedCreditCardInput.setPattern('{{9999}} {{9999}} {{9999}} {{9999}}')
    }
  })
});

API (API)

选项 (options)

Key	Type	Description
element	HTMLInputElement or HTMLTextAreaElement	A valid reference to an input or textarea DOM node
pattern	String	Pattern describing the allowed character set you wish for entry into corresponding field. See Patterns.
onPasteEvent	Function (optional)	A callback function to inspect the unformatted value of the input during a paste event. See Paste Event.

键	类型	描述
元件	HTMLInputElement或HTMLTextAreaElement	对input或textarea DOM节点的有效引用
模式	String	描述希望输入相应字段的允许字符集的模式。 参见模式 。
onPasteEvent	Function (可选)	一个在粘贴事件期间检查输入的未格式化值的回调函数。 请参阅粘贴事件 。

浏览器支持 (Browser Support)

Desktop

桌面

• Chrome (latest)

  镀Chrome(最新)

• Firefox (17+)

  火狐(17+)

• Safari (8+)

  Safari(8+)

• IE11 (desktop/metro)

  IE11(台式机/地铁)

• IE10 (desktop/metro)

  IE10(台式机/地铁)

• IE9

  IE9

自动关闭格式的浏览器 (Browsers Where Formatting is Turned Off Automatically)

Old versions of Samsung Android browsers are incompatible with formatting. These will not attempt to intercept the values and format the input.

三星Android浏览器的旧版本与格式不兼容。 这些将不会尝试截取值并格式化输入。

去做 (TODO)

• [ ] Improve jsdoc

  []改进jsdoc

• [ ] Add example guides/pages

  []添加示例指南/页面

翻译自: https://vuejsexamples.com/input-mask-library-for-vue-js-based-on-restricted-input/

vue掩码处理