Vba excel. маска ввода в textbox
Содержание:
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"; }});
Маска ввода полю в форме в Excel
поле таблицы сCase 1, 4, 1) стрелками нельзя, а t = t☜✿☞ Михаил ☜✿☞ ли использовать маску в ячейки рабочего — MaskEdit.»=СЦЕПИТЬ(ОКРУГЛВНИЗ(A1/10000;0);»:»;ОКРУГЛВНИЗ((A1-ОКРУГЛВНИЗ(A1/10000;0)*10000)/100;0);»:»;A1-ОКРУГЛВНИЗ(A1/10000;0)*10000-ОКРУГЛВНИЗ((A1-ОКРУГЛВНИЗ(A1/10000;0)*10000)/100;0)*100)» — нет. Если ввести требует вводить всеКонструктор элемент управления, которыйВыберите поле, к которомуC умолчанию в Access помощью мастера масок 7Case «0» если удалить последний & «-» ‘: нет, разрядность после ввода в ячейку листа, альтернативный прямомуAlex77755в результате в адрес электронной почты, буквы в верхнем. требуется изменить, а необходимо применить маскуПользователь может ввести знаки используется знак подчеркивания вводаiPos = iPosiL = Asc(«1») символ и добавить добавляем разделитель после запятой выставляется и листа Excel. Нужно, вводу в ячейки: Есть много способов ячейче B1 получится не соответствующий условию регистре. Чтобы использоватьВыберите поле, для которого затем выберите в ввода. или пробелы. (_). Чтобы задатьСоздание настраиваемых масок ввода
— 1iR = Asc(«9») в первый значение
первых 3 и все чтобы он не листа (меню ‘Данные’, ограничить. Ограничь сами 13:18:27, причем Excel на значение, введенные маску ввода этого необходимо создать настраиваемую контекстном меню командуВ разделе
. , : ; — / другой знак, введитеПримеры масок вводаCase 3, 6Case «1», «2» уже изменяется 6 цифрIгор прокопенко ругался, а сам пункт ‘Форма…’.Comanche, ячейки на листе автоматически распознает это данные будут отклонены типа, необходимо задать маску ввода.СвойстваСвойства поляРазделитель целой и дробной его в третьемИспользование масок ввода дляiPos = iPosiL = Asc(«0»)т. е. будетIf t Like: Нужно поставить формат переделывал, например человекименно: ‘1. Форма через меню Данные->Проверка… значение как дату. и появится сообщение, для типа данныхВ области «Свойства поля».на вкладке части, групп разрядов, компоненте маски. адресов электронной почты — 2iR = Asc(«9») ;#-;-; # и «;-;-;» Then t ячеек «общий». вводит : «петров как ‘UserForm’ -
CyberForum.ru>
Masking types
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");$(selector).inputmask({mask"aa-9999"});});
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)
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 .
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", greedyfalse});
The initial mask shown will be «_» instead of «_-____».
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}");$(selector).inputmask("aa-9{1,4}");$(selector).inputmask({ mask"*{1,20}@*{1,20}", greedyfalse,onBeforePastefunction(pastedValue,opts){ pastedValue =pastedValue.toLowerCase();returnpastedValue.replace("mailto:","");}, definitions{'*'{ validator"[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-", cardinality1, casing"lower"}}});});
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"", cardinality1, casing"upper"}}});
or
$("selector").inputmask({ mask"99.9","X", definitions{"X"{ validator"", cardinality1, casing"upper"}}});
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({maskfunction(){return"AAA-999","999-AAA";}});
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",{ jitMaskingtrue}).mask(selector);
numeric extensions
$(document).ready(function(){ $(selector).inputmask("decimal"); $(selector).inputmask("decimal", { allowMinus: false }); $(selector).inputmask("integer"); });
Define the radixpoint
$(document).ready(function(){ $(selector).inputmask("decimal", { radixPoint: "," }); });
Define the number of digits after the radixpoint
$(document).ready(function(){ $(selector).inputmask("decimal", { digits: 3 }); });
When TAB out of the input the digits autocomplate with 0 if the digits option is given a valid number.
Grouping support through: autoGroup, groupSeparator, groupSize
$(document).ready(function(){ $(selector).inputmask("decimal", { radixPoint: ",", autoGroup: true, groupSeparator: ".", groupSize: 3 }); });
Allow minus and/or plus symbol
$(document).ready(function(){ $(selector).inputmask("decimal", { allowMinus: false }); $(selector).inputmask("integer", { allowMinus: false, allowPlus: true }); });
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(); });
Setup
Inputmask can run against different javascript libraries.
You can choose between:
- inputmask.dependencyLib (vanilla)
- inputmask.dependencyLib.jquery
- inputmask.dependencyLib.jqlite
- …. (others are welcome)
Include the js-files which you can find in the folder.
If you want to include the Inputmask and all extensions. (with jQuery as dependencylib)
<scriptsrc="jquery.js"><script><scriptsrc="dist/jquery.inputmask.bundle.js"><script><scriptsrc="dist/inputmask/phone-codes/phone.js"><script><scriptsrc="dist/inputmask/phone-codes/phone-be.js"><script><scriptsrc="dist/inputmask/phone-codes/phone-ru.js"><script>
For individual extensions. (with jQuery as dependencylib)
<scriptsrc="jquery.js"><script><scriptsrc="dist/inputmask/inputmask.js"><script><scriptsrc="dist/inputmask/inputmask.extensions.js"><script><scriptsrc="dist/inputmask/inputmask.numeric.extensions.js"><script><scriptsrc="dist/inputmask/inputmask.date.extensions.js"><script><scriptsrc="dist/inputmask/inputmask.phone.extensions.js"><script><scriptsrc="dist/inputmask/jquery.inputmask.js"><script><scriptsrc="dist/inputmask/phone-codes/phone.js"><script><scriptsrc="dist/inputmask/phone-codes/phone-be.js"><script><scriptsrc="dist/inputmask/phone-codes/phone-ru.js"><script>
For individual extensions. (with vanilla dependencylib)
<scriptsrc="dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"><script><scriptsrc="dist/inputmask/inputmask.js"><script><scriptsrc="dist/inputmask/inputmask.extensions.js"><script><scriptsrc="dist/inputmask/inputmask.numeric.extensions.js"><script><scriptsrc="dist/inputmask/inputmask.date.extensions.js"><script><scriptsrc="dist/inputmask/inputmask.phone.extensions.js"><script><scriptsrc="dist/inputmask/phone-codes/phone.js"><script><scriptsrc="dist/inputmask/phone-codes/phone-be.js"><script><scriptsrc="dist/inputmask/phone-codes/phone-ru.js"><script>
If you like to automatically bind the inputmask to the inputs marked with the data-inputmask- … attributes you may also want to include the inputmask.binding.js
<scriptsrc="dist/inputmask/bindings/inputmask.binding.js"><script>
If you want to include the Inputmask and all extensions.
For individual extensions.
Every extension exports the Inputmask, so you only need to import the extensions.
See example.
By default the vanilla dependencyLib is used. You can select another dependency
by creating an alias in the webpack.config.
InputMask options
A masking pattern must be provided and must contain at least one editable character, or an will be thrown.
The following format characters define editable parts of the mask:
- — number
- — letter
- — letter, forced to upper case when entered
- — alphanumeric
- — alphanumeric, forced to upper case when entered
If you need to include one of these characters as a static part of the mask, you can escape them with a preceding backslash:
var mask = new InputMask({pattern: '\\A11 \\1AA', value: 'A99 1ZZ'}) mask.getValue() // → 'A99 1ZZ'
If you need to include a static backslash in a pattern, you must escape it:
var mask = new InputMask({pattern: '\\\\A11\\\\', value: 'Z98'}) mask.getValue() // → '\\Z98\\'
Otherwise, all other characters are treated as static parts of the pattern.
Example patterns
- Credit card number:
- Date:
- ISO date:
- Time:
- Canadian postal code:
- Norn Iron license plate:
An object defining additional custom format characters to use in the mask’s pattern.
When defining a new format character, a function is required and a function can optionally be defined to modify the validated character before adding it to the mask’s value.
For example this is how you would define as a new format character which accepts word character input (alphanumeric or underscore) and forces it to lower case when entered:
var mask = new InputMask({ pattern: 'Awwwww', // An uppercase letter followed by 5 word characters formatCharacters: { 'w': { validate: function(char) { return \w.test(char) } transform: function(char) { return char.toLowerCase() } } } })
To override a built-in format character, pass its character as a property of this object along with the new definition.
To disable a built-in format character, pass its character as a property of this object with a value:
var mask = new InputMask({ pattern: 'A1111', // Treats the 'A' as static formatCharacters: { 'A': null } })
The character which is used to fill in editable slots for which there is no input yet when getting the mask’s current value.
Defaults to ; must be a single character.
var mask = new InputMask({pattern: '11/11/1111', placeholderChar: ' '}) mask.input('1') // → true mask.getValue() // → '1 / / '
An optional initial value for the mask.
An optional default selection — defaults to , placing the cursor before the first character.
An optional property that, if true, progressively shows the mask as input is entered. Defaults to
Example:
Given an input with a mask of , a value of , and set to , then the input’s value is formatted as
Given the same input but with a value of , then the input’s value is formatted as
Given the same input but with a value of , then the input’s value is formatted as
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"});
InputMask history methods
An creates a new history snapshot each time you:
- Perform a different type of editing operation to the previous editing operation.
- Perform an editing operation with the cursor in a different position from where it was left after a previous editing operation.
- Perform an editing operation with a text selection.
History methods allow you to step backwards and forwards through these snapshots, updating and accordingly.
If you perform an editing operation while stepping backwards through history snapshots, all snapshots after the current one will be disposed of.
A history method returns if a valid history operation was performed and and have been updated.
Otherwise, if an invalid history operation is attempted (e.g. trying to redo when you’ve already reached the point undoing started from) it will return .
Steps backwards through history snapshots.
Steps forwards through history snapshots.
Overview
This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer, Firefox, Safari, Opera, and Chrome. A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions are predefined:
- a — Represents an alpha character (A-Z,a-z)
- 9 — Represents a numeric character (0-9)
- * — Represents an alphanumeric character (A-Z,a-z,0-9)
First, include the jQuery and masked input javascript files.
npm install jquery-inputmask --dev or yarn add jquery-inputmask
Next, call the mask function for those items you wish to have masked.
jQuery(function($){ $("#date").mask("99/99/9999"); $("#phone").mask("(999) 999-9999"); $("#tin").mask("99-9999999"); $("#ssn").mask("999-99-9999");});
Optionally, if you are not satisfied with the underscore (‘_’) character as a placeholder, you may pass an optional argument to the maskedinput method.
jQuery(function($){ $("#product").mask("99/99/9999",{placeholder:" "});});
Optionally, if you would like to execute a function once the mask has been completed, you can specify that function as an optional argument to the maskedinput method.
jQuery(function($){ $("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});});
Optionally, if you would like to disable the automatic discarding of the uncomplete input, you may pass an optional argument to the maskedinput method
jQuery(function($){ $("#product").mask("99/99/9999",{autoclear: false});});
You can now supply your own mask definitions.
jQuery(function($){ $.mask.definitions=''; $("#eyescript").mask("~9.99 ~9.99 999");});
You can have part of your mask be optional. Anything listed after ‘?’ within the mask is considered optional user input. The common example for this is phone number + optional extension.
jQuery(function($){ $("#phone").mask("(999) 999-9999? x99999");});
If your requirements aren’t met by the predefined placeholders, you can always add your own. For example, maybe you need a mask to only allow hexadecimal characters. You can add your own definition for a placeholder, say ‘h’, like so: Then you can use that to mask for something like css colors in hex with a .
jQuery(function($){ $("#phone").mask("#hhhhhh");});
By design, this plugin will reject input which doesn’t complete the mask. You can bypass this by using a ‘?’ character at the position where you would like to consider input optional. For example, a mask of «(999) 999-9999? x99999» would require only the first 10 digits of a phone number with extension being optional.
Методы:
mask(elems)
Создание маски ввода
$(selector).inputmask({ mask: "99-999-99"});
или
Inputmask({ mask: "99-999-99"}).mask(document.querySelectorAll(selector));
или
Inputmask("99-999-99").mask(document.querySelectorAll(selector));
или
var im : new Inputmask("99-999-99"); im.mask(document.querySelectorAll(selector));
или
Inputmask("99-999-99").mask(selector);
unmaskedvalue
Get the
$(selector).inputmask('unmaskedvalue');
или
var input = document.getElementById(selector); if (input.inputmask) input.inputmask.unmaskedvalue()
Value unmasking
Unmask a given value against the mask.
var unformattedDate = Inputmask.unmask("23/03/1973", { alias: "dd/mm/yyyy"}); //23031973
удаление
Удаление .
$(selector).inputmask('remove');
или
var input = document.getElementById(selector); if (input.inputmask) input.inputmask.remove()
или
Inputmask.remove(document.getElementById(selector));
getemptymask
return the default (empty) mask value
$(document).ready(function(){ $("#test").inputmask("999-AAA"); var initialValue = $("#test").inputmask("getemptymask"); // initialValue => "___-___" });
hasMaskedValue
Проверьте маскируется ли возвращаемое значение или нет; В настоящее время только надежно работает при использовании jquery.val функции для извлечения значения
$(document).ready(function(){ function validateMaskedValue(val){} function validateValue(val){} var val = $("#test").val(); if ($("#test").inputmask("hasMaskedValue")) validateMaskedValue(val); else validateValue(val); });
isComplete
Проверяет, осуществлен ли полный ввод значения или нет
$(document).ready(function(){ if ($(selector).inputmask("isComplete")){ //do something } });
getmetadata
Метаданные фактической маски, представленной в определениях маски может быть получено с помощью вызова getmetadata. Если только маска при условии определения маски будет возвращен getmetadata.
$(selector).inputmask("getmetadata");
установка значения
SetValue функциональность, чтобы установить значение для inputmask, как вы могли бы сделать с jQuery.val, но это вызовет внутреннее событие, используемый inputmask всегда, в любом случае. Это особенно полезно при клонировании inputmask с jQuery.clone. Клонирование inputmask не является полностью функциональным клоном. На первом случае (MouseEnter, фокус …) сотрудник inputmask может обнаружить, если он где клонировали может активировать маскирование. Однако при установке значения с jQuery.val не существует ни одно из событий сработавших в этом случае. SetValue функциональность делает это для вас.
option(options, noremask)
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({ onBeforePaste: function (pastedValue, opts) { return phoneNumOnPaste(pastedValue, opts); } });
$("#CellPhone").inputmask("option", { onBeforePaste: function (pastedValue, opts) { return phoneNumOnPaste(pastedValue, opts); } })
Формат
Вместо того, чтобы маскировать входного элемента также можно использовать для форматирования inputmask для форматирования заданных значений. Подумайте о форматировании значений, чтобы показать в jqGrid или на других элементах затем вводит.
var formattedDate = Inputmask.format("2331973", { alias: "dd/mm/yyyy"});
var isValid = Inputmask.isValid("23/03/1973", { alias: "dd/mm/yyyy"});
Properties
Name | Type | Default | ||||
---|---|---|---|---|---|---|
disabled | Boolean | false | ||||
Sets or gets whether the widget is disabled. $('#jqxMaskedInput').jqxMaskedInput({ disabled: true}); Get the property. Try it: disabled is set to true |
||||||
height | Number/String | null | ||||
Sets or gets height of the masked input in pixels. $('#jqxMaskedInput').jqxMaskedInput({ height: '25px'}); Get the property. Try it: height is set to ’25px’ |
||||||
mask | String | ‘#####’ | ||||
Sets or gets the masked input’s mask. Mask characters:
Get the property. Try it: mask is set to ‘###-##-####’ |
||||||
promptChar | String | «_» | ||||
Sets or gets the prompt char displayed when an editable char is empty. $('#jqxMaskedInput').jqxMaskedInput({ promptChar: "." }); Get the property. Try it: promptChar is set to «#» |
||||||
readOnly | Boolean | false | ||||
Sets or gets the readOnly state of the input. $('#jqxMaskedInput').jqxMaskedInput({ readOnly: true }); Get the property. Try it: readOnly is set to true |
||||||
rtl | Boolean | false | ||||
Sets or gets a value indicating whether widget’s elements are aligned to support locales using right-to-left fonts. Get the property. Try it: rtl is set to true |
||||||
theme | String | » | ||||
Sets the widget’s theme. jQWidgets uses a pair of css files — jqx.base.css and jqx..css. The base stylesheet creates the styles related to the widget’s layout like margin, padding, border-width, position. The second css file applies the widget’s colors and backgrounds. The jqx.base.css should be included before the second CSS file.
Try it: theme is set to ‘energyblue’ |
||||||
textAlign | String | left | ||||
Sets or gets the text alignment. Possible Values: Initialize a MaskedInput with the property specified. $('#jqxMaskedInput').jqxMaskedInput({ textAlign: "right"}); Get the property. Try it: textAlign is set to ‘right’ |
||||||
value | String | null | ||||
Sets or gets the masked input’s value. Get the property. Try it: value is set to 300 |
||||||
width | Number/String | null | ||||
Sets or gets width of the masked input in pixels. Only positive values have effect. $('#jqxMaskedInput').jqxMaskedInput({ width: '250px'}); Get the property. Try it: width is set to ‘250px’ |
||||||
change | Event | |||||
This event is triggered when the value is changed and the control’s focus is lost. Bind to the event by type: jqxMaskedInput. Try it: Bind to the change event by type:jqxMaskedInput |
||||||
valueChanged | Event | |||||
This event is triggered when the value is changed. Bind to the event by type: jqxMaskedInput. Try it: Bind to the valueChanged event by type:jqxMaskedInput |
||||||
clear | Method | |||||
Clears the value.
Return ValueNone Invoke the method. Try it: clears the jqxMaskedInput |
||||||
destroy | Method | |||||
Destroys the widget.
Return ValueNone Invoke the method. Try it: destroys the jqxMaskedInput |
||||||
focus | Method | |||||
Focuses the widget.
Return ValueNone Invoke the method. Try it: focuses the jqxMaskedInput |
||||||
val | Method | |||||
Sets or gets the value.
Return ValueString Get the value using the val method. // Get the value using jQuery’s val. Set the value using the val method. // Set the value using jQuery’s val. Try it: sets the value of the jqxMaskedInput |
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.