vue掩码处理
限制输入 (Restricted Input)
Allow restricted character sets in input elements.
在输入元素中允许使用受限制的字符集。
特征 (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 Placeholder
s and PermaChar
s.
模式是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. PermaChar
s are defined in the pattern as any characters other than Placeholder
s.
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掩码处理