Class yii\widgets\maskedinput
Содержание:
Masking types
Static masks
These are the very basic of masking. The mask is defined and will not change during the input.
$(document).ready(function(){
$(selector).inputmask("aa-9999"); //static mask
$(selector).inputmask({mask: "aa-9999"}); //static mask
});
Optional masks
It is possible to define some parts in the mask as optional. This is done by using .
Example:
$('#test').inputmask('(99) 9999-9999');
This mask wil allow input like (99) 99999-9999 or (99) 9999-9999.Input => 12123451234 mask => (12) 12345-1234 (trigger complete)Input => 121234-1234 mask => (12) 1234-1234 (trigger complete)Input => 1212341234 mask => (12) 12341-234_ (trigger incomplete)
skipOptionalPartCharacter
As an extra there is another configurable character which is used to skip an optional part in the mask.
skipOptionalPartCharacter: " ",
Input => 121234 1234 mask => (12) 1234-1234 (trigger complete)
When is set in the options (default), the mask will clear out the optional part when it is not filled in and this only in case the optional part is at the end of the mask.
For example, given:
$('#test').inputmask('999');
While the field has focus and is blank, users will see the full mask . When the required part of the mask is filled and the field loses focus, the user will see . When both the required and optional parts of the mask are filled out and the field loses focus, the user will see .
Optional masks with greedy false
When defining an optional mask together with the greedy: false option, the inputmask will show the smallest possible mask as input first.
$(selector).inputmask({ mask: "99999", greedy: false });
The initial mask shown will be «_» instead of «_-____».
Dynamic masks
Dynamic masks can change during the input. To define a dynamic part use { }.
{n} => n repeats{n,m} => from n to m repeats
Also {+} and {_} is allowed. + start from 1 and _ start from 0.
$(document).ready(function(){
$(selector).inputmask("aa-9{4}"); //static mask with dynamic syntax
$(selector).inputmask("aa-9{1,4}"); //dynamic mask ~ the 9 def can be occur 1 to 4 times
//email mask
$(selector).inputmask({
mask: "*{1,20}@*{1,20}",
greedy: false,
onBeforePaste: function (pastedValue, opts) {
pastedValue = pastedValue.toLowerCase();
return pastedValue.replace("mailto:", "");
},
definitions: {
'*': {
validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
cardinality: 1,
casing: "lower"
}
}
});
Alternator masks
The alternator syntax is like an OR statement. The mask can be one of the 2 choices specified in the alternator.
To define an alternator use the |.ex: «a|9» => a or 9 «(aaa)|(999)» => aaa or 999
Also make sure to read about the keepStatic option.
$("selector").inputmask("(99.9)|(X)", {
definitions: {
"X": {
validator: "",
cardinality: 1,
casing: "upper"
}
}
});
or
$("selector").inputmask({
mask: "99.9", "X",
definitions: {
"X": {
validator: "",
cardinality: 1,
casing: "upper"
}
}
});
Preprocessing masks
You can define the mask as a function which can allow to preprocess the resulting mask. Example sorting for multiple masks or retrieving mask definitions dynamically through ajax. The preprocessing fn should return a valid mask definition.
$(selector).inputmask({ mask: function () { /* do stuff */ return "AAA-999", "999-AAA"; }});
Supported markup options
<inputid="test"dir="rtl" />
<inputid="test"readonly="readonly" />
<inputid="test"disabled="disabled" />
<inputid="test"maxlength="4" />
You can also apply an inputmask by using the data-inputmask attribute. In the attribute you specify the options wanted for the inputmask. This gets parsed with $.parseJSON (for the moment), so be sure to use a well-formed json-string without the {}.
<inputdata-inputmask="'alias': 'date'" /><inputdata-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
$(document).ready(function(){$(":input").inputmask();});
All options can also be passed through data-attributes.
<inputdata-inputmask-mask="9"data-inputmask-repeat="10"data-inputmask-greedy="false" />
$(document).ready(function(){$(":input").inputmask();});
Usage:
Include the js-files which you can find in the dist-folder. You have the bundled file which contains the main plugin code and also all extensions (date, numerics, other) or if you prefer to only include some parts, use the separate js-files in the dist/min folder.
The minimum to include is the jquery.inputmask.js
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.inputmask.js" type="text/javascript"></script>
Define your masks:
$(document).ready(function(){
$(selector).inputmask("99-9999999"); //static mask
$(selector).inputmask("mask", {"mask": "(999) 999-9999"}); //specifying fn & options
$(selector).inputmask({"mask": "99-9999999"}); //specifying options only
$(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
});
or via data-inputmask attribute
<input data-inputmask="'alias': 'date'" /> <input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" /> <input data-inputmask="'mask': '99-9999999'" />
$(document).ready(function(){
$(":input").inputmask();
});
Any option can also be passed through the use of a data attribute. Use data-inputmask-<the name op the option>=»value»
<input id="example1" data-inputmask-clearmaskonlostfocus="false" />
<input id="example2" data-inputmask-regex="[a-za-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:(?:*)?\.)+(?:*)?" />
$(document).ready(function(){
$("#example1").inputmask("99-9999999");
$("#example2").inputmask("Regex");
});
Default masking definitions
- 9 : numeric
- a : alphabetical
There are more definitions defined within the extensions.
You can find info within the js-files or by further exploring the options.
Supported markup options
data-inputmask attribute
You can also apply an inputmask by using the data-inputmask attribute. In the attribute you specify the options wanted for the inputmask. This gets parsed with $.parseJSON (for the moment), so be sure to use a well-formed json-string without the {}.
<input data-inputmask="'alias': 'date'" /> <input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
$(document).ready(function(){
$(":input").inputmask();
});
data-inputmask-<option> attribute
All options can also be passed through data-attributes.
<input data-inputmask-mask="9" data-inputmask-repeat="10" data-inputmask-greedy="false" />
$(document).ready(function(){
$(":input").inputmask();
});
Masking types
Static masks
These are the very basic of masking. The mask is defined and will not change during the input.
$(document).ready(function(){
$(selector).inputmask("aa-9999"); //static mask
$(selector).inputmask({mask: "aa-9999"}); //static mask
});
Optional masks
It is possible to define some parts in the mask as optional. This is done by using .
Example:
$('#test').inputmask('(99) 9999-9999');
This mask wil allow input like or .
Input => 12123451234 mask => (12) 12345-1234 (trigger complete)
Input => 121234-1234 mask => (12) 1234-1234 (trigger complete)
Input => 1212341234 mask => (12) 12341-234_ (trigger incomplete)
skipOptionalPartCharacter
As an extra there is another configurable character which is used to skip an optional part in the mask.
skipOptionalPartCharacter: " "
Input => 121234 1234 mask => (12) 1234-1234 (trigger complete)
When is set in the options (default), the mask will clear out the optional part when it is not filled in and this only in case the optional part is at the end of the mask.
For example, given:
$('#test').inputmask('999');
While the field has focus and is blank, users will see the full mask . When the required part of the mask is filled and the field loses focus, the user will see . When both the required and optional parts of the mask are filled out and the field loses focus, the user will see .
Optional masks with greedy false
When defining an optional mask together with the greedy: false option, the inputmask will show the smallest possible mask as input first.
$(selector).inputmask({ mask: "9", greedy: false });
The initial mask shown will be «_» instead of «_-____».
Dynamic masks
Dynamic masks can change during the input. To define a dynamic part use { }.
{n} => n repeats{n,m} => from n to m repeats
Also {+} and {*} is allowed. + start from 1 and * start from 0.
$(document).ready(function(){
$(selector).inputmask("aa-9{4}"); //static mask with dynamic syntax
$(selector).inputmask("aa-9{1,4}"); //dynamic mask ~ the 9 def can be occur 1 to 4 times
//email mask
$(selector).inputmask({
mask: "*{1,20}@*{1,20}",
greedy: false,
onBeforePaste: function (pastedValue, opts) {
pastedValue = pastedValue.toLowerCase();
return pastedValue.replace("mailto:", "");
},
definitions: {
'*': {
validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
cardinality: 1,
casing: "lower"
}
}
});
});
Alternator masks
The alternator syntax is like an OR statement. The mask can be one of the 2 choices specified in the alternator.
To define an alternator use the |.ex: «a|9» => a or 9 «(aaa)|(999)» => aaa or 999
Also make sure to read about the keepStatic option.
$("selector").inputmask("(99.9)|(X)", {
definitions: {
"X": {
validator: "",
cardinality: 1,
casing: "upper"
}
}
});
or
$("selector").inputmask({
mask: "99.9", "X",
definitions: {
"X": {
validator: "",
cardinality: 1,
casing: "upper"
}
}
});
Preprocessing masks
You can define the mask as a function which can allow to preprocess the resulting mask. Example sorting for multiple masks or retrieving mask definitions dynamically through ajax. The preprocessing fn should return a valid mask definition.
$(selector).inputmask({ mask: function () { /* do stuff */ return "AAA-999", "999-AAA"; }});
JIT Masking
Just in time masking. With the jitMasking option you can enable jit masking. The mask will only be visible for the user entered characters.
Default: false
Value can be true or a threshold number or false.
Inputmask("date", { jitMasking: true }).mask(selector);
General
set a value and apply mask
this can be done with the traditional jquery.val function (all browsers) or JavaScript value property for browsers which implement lookupGetter or getOwnPropertyDescriptor
$(document).ready(function(){
$("#number").val(12345);
var number = document.getElementById("number");
number.value = 12345;
});
with the autoUnmaskoption you can change the return of $.fn.val (or value property) to unmaskedvalue or the maskedvalue
$(document).ready(function(){
$('#<%= tbDate.ClientID%>').inputmask({ "mask": "d/m/y", 'autoUnmask' : true}); // value: 23/03/1973
alert($('#<%= tbDate.ClientID%>').val()); // shows 23031973 (autoUnmask: true)
var tbDate = document.getElementById("<%= tbDate.ClientID%>");
alert(tbDate.value); // shows 23031973 (autoUnmask: true)
});
auto upper/lower- casing inputmask
You can define within a definition to automatically lowercase or uppercase the entry in an input by giving the casing.Casing can be null, «upper» or «lower»
Inputmask.extendDefinitions({
'A': {
validator: "",
cardinality: 1,
casing: "upper" //auto uppercasing
},
'+': {
validator: "",
cardinality: 1,
casing: "upper"
}
});
Include jquery.inputmask.extensions.js for using the A and # definitions.
$(document).ready(function(){
$("#test").inputmask("999-AAA"); // => 123abc ===> 123-ABC
});
placeholderChar
The placeholder character represents the fillable spot in the mask. The default placeholder
character is underscore, .
For example, with mask…
'(', /1-9/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/
…the user would fill out .
You can pass a different placeholder character. For example, the unicode character would
make the mask above look like . In JavaScript, you would pass such unicode character
as .
Note: you cannot use a mask that has a placeholder character hard-coded in it. That
is, since the default placeholder character is , you cannot have a mask that looks like
unless you pass that is not and doesn’t exist
in your mask.
Usage:
Include the js-files which you can find in the dist-folder. You have the bundled file which contains the main plugin code and also all extensions. (date, numerics, other) or if you prefer to only include some parts, use the separate js-files in the dist/min folder.
The minimum to include is the jquery.inputmask.js
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.inputmask.js" type="text/javascript"></script>
Define your masks:
$(document).ready(function(){
$("#date").inputmask("d/m/y"); //direct mask
$("#phone").inputmask("mask", {"mask": "(999) 999-9999"}); //specifying fn & options
$("#tin").inputmask({"mask": "99-9999999"}); //specifying options only
});
or
<input data-inputmask="'alias': 'date'" /> <input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" /> <input data-inputmask="'mask': '99-9999999'" />
$(document).ready(function(){
$(":input").inputmask();
});
Default masking definitions
- 9 : numeric
- a : alfabetic
There are more definitions defined within the extensions.
You can find info within the js-files or by further exploring the options.
Supported markup options
data-inputmask attribute
You can also apply an inputmask by using the data-inputmask attribute. In the attribute you specify the options wanted for the inputmask. This gets parsed with $.parseJSON (for the moment), so be sure to use a well-formed json-string without the {}.
<input data-inputmask="'alias': 'date'" /> <input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
$(document).ready(function(){
$(":input").inputmask();
});
data-inputmask-<option> attribute
All options can also be passed through data-attributes.
<input data-inputmask-mask="9" data-inputmask-repeat="10" data-inputmask-greedy="false" />
$(document).ready(function(){
$(":input").inputmask();
});
General
set a value and apply mask
this can be done with the traditional jquery.val function (all browsers) or JavaScript value property for browsers which implement lookupGetter or getOwnPropertyDescriptor
$(document).ready(function(){
$("#number").val(12345);
var number = document.getElementById("number");
number.value = 12345;
});
with the autoUnmaskoption you can change the return of $.fn.val (or value property) to unmaskedvalue or the maskedvalue
$(document).ready(function(){
$('#<%= tbDate.ClientID%>').inputmask({ "mask": "d/m/y", 'autoUnmask' : true}); // value: 23/03/1973
alert($('#<%= tbDate.ClientID%>').val()); // shows 23031973 (autoUnmask: true)
var tbDate = document.getElementById("<%= tbDate.ClientID%>");
alert(tbDate.value); // shows 23031973 (autoUnmask: true)
});
auto-casing inputmask
You can define within a definition to automatically apply some casing on the entry in an input by giving the casing.Casing can be null, «upper», «lower» or «title».
Inputmask.extendDefinitions({
'A': {
validator: "",
cardinality: 1,
casing: "upper" //auto uppercasing
},
'+': {
validator: "",
cardinality: 1,
casing: "upper"
}
});
Include jquery.inputmask.extensions.js for using the A and # definitions.
$(document).ready(function(){
$("#test").inputmask("999-AAA"); // => 123abc ===> 123-ABC
});
Experimental ?
The following props are considered experimental because they are more prone to issues and are likely to be changed in the future. Use with caution.
In case you need to implement more complex masking behavior, you can provide function to change masked value and cursor position before it will be applied to the input. receives following arguments:
- newState (object): New input state. Contains and fields. is null on input blur or when function is called before input mount. Example:
- oldState (object): Input state before change. Contains and fields. is null on input focus or when function is called before input mount.
- userInput (string): Raw entered or pasted string. if user didn’t enter anything (e.g. triggered by deletion or rerender due to props change).
- maskOptions (object): Mask options. Example:
{ mask'99/99/9999', maskChar'_', alwaysShowMaskfalse, formatChars{'9''','a''','*'''}, permanents2,5}
must return an object with following fields:
- value (string): New value.
- selection (object): New selection. If in argument is null, it must be null too.
Please note that executes more often than and must be pure.
To use another component instead of regular pass render function as a children. Function receives argument which contains props that aren’t used by react-input-mask’s internals. I.e. it passes down every prop except the following ones: , , , , , , , . These properties, if used, should always be passed directly to react-input-mask instead of children and shouldn’t be altered in chldren’s function.
import React from'react';import InputMask from'react-input-mask';import MaterialInput from'@material-ui/core/Input';constInput=(props)=>(<InputMaskmask="99/99/9999"value={props.value}onChange={props.onChange}>{(inputProps)=><MaterialInput{...inputProps}type="tel"disableUnderline/>}</InputMask>);constInvalidInput=(props)=>(<InputMaskmask="99/99/9999"value={props.value}>{(inputProps)=><MaterialInput{...inputProps}type="tel"disableUnderlineonChange={props.onChange}/>}</InputMask>);
import React from'react';import InputMask from'react-input-mask';classPhoneInputextendsReact.Component{render(){return<InputMask{...this.props}mask="+4\9 99 999 99"maskChar=""/>;}}
Mask for ZIP Code. Uses beforeMaskedValueChange to omit trailing minus if it wasn’t entered by user:
import React from'react';import InputMask from'react-input-mask';classInputextendsReact.Component{ state ={ value''}onChange=(event)=>{this.setState({ valueevent.target.value});}beforeMaskedValueChange=(newState,oldState,userInput)=>{var{ value }= newState;var selection =newState.selection;var cursorPosition = selection ?selection.startnull;if(value.endsWith('-')&& userInput !=='-'&&!this.state.value.endsWith('-')){if(cursorPosition ===value.length){ cursorPosition--; selection ={ start cursorPosition, end cursorPosition };} value =value.slice(,-1);}return{ value, selection};}render(){return<InputMaskmask="99999-9999"maskChar={null}value={this.state.value}onChange={this.onChange}beforeMaskedValueChange={this.beforeMaskedValueChange}/>;}}
Browser’s autofill requires either empty value in input or value which exactly matches beginning of the autofilled value. I.e. autofilled value «+1 (555) 123-4567» will work with «+1» or «+1 (5», but won’t work with «+1 (___) ___-____» or «1 (555)». There are several possible solutions:
- Set to null and trim space after «+1» with if no more digits are entered.
- Apply mask only if value is not empty. In general, this is the most reliable solution because we can’t be sure about formatting in autofilled value.
- Use less formatting in the mask.
Please note that it might lead to worse user experience (should I enter +1 if input is empty?). You should choose what’s more important to your users — smooth typing experience or autofill. Phone and ZIP code inputs are very likely to be autofilled and it’s a good idea to care about it, while security confirmation code in two-factor authorization shouldn’t care about autofill at all.
How to use it:
1. Include the core JavaScript file and the OPTIONAL ‘data’ extension on the webpage.
<script src="https://code.jquery.com/jquery.min.js"></script> <script src="jquery.maskedinput.core.js"></script> <script src="jquery.maskedinput.date.js"></script>
2. Or include the JavaScript file which has the date plugin bundled.
<script src="https://code.jquery.com/jquery.min.js"></script> <script src="jquery.maskedinput.full.js"></script>
3. Create a new MaskedInput object and set the data format as this:
var dateMask = new MaskedInput({
format: 'dd/MM/yyyy hh:mm tt'
});
4. Attach the plugin to desired element:
dateMask.$el.appendTo('#date-field-cell');
5. Set the options for each field:
dateMask
.fieldOption('hours_12', 'required', false)
.fieldOption('minutes', 'required', false)
.fieldOption('ampm', 'required', false)
.resize();
6. API methods.
dateMask // Get an internal field element by index or by name. .field(index) // Get/set a field's configuration option .fieldOption(name, newValue) // Get/set an internal field's value by index or by name. .fieldValue(index, newValue) // Get/set a configuration option .option(name, newValue) // Call if something has drastically changed and the control needs to be regenerated. // Only applicable when you've manually changed a field's type. .render() // Update the size of the field's content. // This can't be called when the control is not on the DOM yet. If you don't want the field to be dynamically sized, you can skip calling this. .resize() // A synonym for value .val(newValue?) // Get/set the full value .value(newValue?)
7. PartType parameters:
/**
* @typedef {String} MaskedInput~PartType
* @name MaskedInput~PartType
* @enum {String}
*/
var PartType = {
/** @const */ NUMBER: 'number',
/** @const */ TEXT: 'text',
/** @const */ LABEL: 'label'
};
8. MaskedInput Part parameters:
- type: Type of the field
- name: Name for this field
- ariaLabel: An ARIA accessibility label
- text: Text for this field if it’s a LABEL
- placeholder: Placeholder for the field
- length: Length of the field
- maxLength: Maximum length of the field
- numericMin: Minimum numeric value
- numericMax: Maximum numeric value
- wholeNumber: Force the number to be whole? (default `false`)
- validator: Validator regex or function
- options: Options to choose from for textual field
- postProcess: Function for post processing a value before retrieving by user
- padding: Enable padding in value result (default `true`)
- required: Is the field required (default `true`)
- defaultValue: Default value, used if field is not `required`
- forcePlaceholderWidth: Always consider placeholder’s width (default `true`)
9. MaskedInput Pattern parameters:
- pattern: Pattern to recognize in the format
- type: Type of the field
- name: Name for this field
- ariaLabel: An ARIA accessibility label
- text: Text for this field if it’s a LABEL
- placeholder: Placeholder for the field
- length: Length of the field
- maxLength: Maximum length of the field
- numericMin: Minimum numeric value
- numericMax: Maximum numeric value
- wholeNumber: Force the number to be whole? (default `false`)
- validator: Validator regex or function
- options: Options to choose from for textual field
- postProcess: Function for post processing a value before retrieving by user
- padding: Enable padding in value result (default `true`)
- required: Is the field required (default `true`)
- defaultValue: Default value, used if field is not `required`
- forcePlaceholderWidth: Always consider placeholder’s width (default `true`)
10. MaskedInput options:
- format: Format to show
- patterns: Additional patterns to recognize in the format
Methods:
Create a mask for the input.
$(selector).inputmask({ mask"99-999-99"});
or
Inputmask({ mask"99-999-99"}).mask(document.querySelectorAll(selector));
or
Inputmask("99-999-99").mask(document.querySelectorAll(selector));
or
var im =newInputmask("99-999-99");im.mask(document.querySelectorAll(selector));
or
Inputmask("99-999-99").mask(selector);
Get the
$(selector).inputmask('unmaskedvalue');
or
var input =document.getElementById(selector);if(input.inputmask)input.inputmask.unmaskedvalue()
Unmask a given value against the mask.
var unformattedDate =Inputmask.unmask("23/03/1973",{ alias"dd/mm/yyyy"});
Remove the .
$(selector).inputmask('remove');
or
var input =document.getElementById(selector);if(input.inputmask)input.inputmask.remove()
or
Inputmask.remove(document.getElementById(selector));
return the default (empty) mask value
$(document).ready(function(){$("#test").inputmask("999-AAA");var initialValue =$("#test").inputmask("getemptymask");});
Check whether the returned value is masked or not; currently only works reliably when using jquery.val fn to retrieve the value
$(document).ready(function(){functionvalidateMaskedValue(val){}functionvalidateValue(val){}var val =$("#test").val();if($("#test").inputmask("hasMaskedValue"))validateMaskedValue(val);elsevalidateValue(val);});
Verify whether the current value is complete or not.
$(document).ready(function(){if($(selector).inputmask("isComplete")){}});
The metadata of the actual mask provided in the mask definitions can be obtained by calling getmetadata. If only a mask is provided the mask definition will be returned by the getmetadata.
$(selector).inputmask("getmetadata");
The setvalue functionality is to set a value to the inputmask like you would do with jQuery.val, BUT it will trigger the internal event used by the inputmask always, whatever the case. This is particular usefull when cloning an inputmask with jQuery.clone. Cloning an inputmask is not a fully functional clone. On the first event (mouseenter, focus, …) the inputmask can detect if it where cloned an can reactivate the masking. However when setting the value with jQuery.val there is none of the events triggered in that case. The setvalue functionality does this for you.
Get or set an option on an existing inputmask.
The option method is intented for adding extra options like callbacks, etc at a later time to the mask.
When extra options are set the mask is automatically reapplied, unless you pas true for the noremask argument.
Set an option
document.querySelector("#CellPhone").inputmask.option({onBeforePastefunction(pastedValue,opts){returnphoneNumOnPaste(pastedValue, opts);}});
$("#CellPhone").inputmask("option",{onBeforePastefunction(pastedValue,opts){returnphoneNumOnPaste(pastedValue, opts);}})
Instead of masking an input element it is also possible to use the inputmask for formatting given values. Think of formatting values to show in jqGrid or on other elements then inputs.
var formattedDate =Inputmask.format("2331973",{ alias"dd/mm/yyyy"});
Validate a given value against the mask.
var isValid =Inputmask.isValid("23/03/1973",{ alias"dd/mm/yyyy"});
Property Details
$_hashVar
protected property
The hashed variable to store the pluginOptions
protected string = null
$aliases
public property
Custom aliases to use. Should be configured as , where
- is a string containing a text to identify your mask alias definition (e.g. ‘phone’) and
- is an array containing settings for the mask symbol, exactly similar to parameters as passed in .
public array = null
$clientOptions
public property
The JQuery plugin options for the input mask plugin.
See also https://github.com/RobinHerbots/Inputmask.
public array = []
$definitions
public property
Custom mask definitions to use. Should be configured as , where
- is a string, containing a character to identify your mask definition and
-
is an array, consisting of the following entries:
- : string, a JS regular expression or a JS function.
- : int, specifies how many characters are represented and validated for the definition.
- : array, validate the characters before the definition cardinality is reached.
- : string, allows shifting values from other definitions, with this .
public array = null
$mask
public property
The input mask (e.g. ’99/99/9999′ for date input). The following characters
can be used in the mask and are predefined:
- : represents an alpha character (A-Z, a-z)
- : represents a numeric character (0-9)
- : represents an alphanumeric character (A-Z, a-z, 0-9)
-
and : anything entered between the square brackets is considered optional user input. This is
based on the setting in .
Additional definitions can be set through the property.
public string|array|yii\web\JsExpression = null
$options
public property
The HTML attributes for the input tag.
See also for details on how attributes are being rendered.
public array = [‘class’ => ‘form-control’
$type
public property
(available since version 2.0.6)
The type of the input tag. Currently only ‘text’ and ‘tel’ are supported.
See also https://github.com/RobinHerbots/Inputmask.
public string = ‘text’
