AllowedSymbols: Array
The AllowedSymbols property sets an array of symbols allowed to input in the editor.
Use JSON or the setAllowedSymbols method to set the property value and the getAllowedSymbols method to get the property value.
To execute the example, the HTML page must contain links to the PP.js script file and the PP.css style file in the <body> tag of the <div> item HTML page with the maskEdit identifier. Create an instance of the MaskEdit component and add a handler of the KeyPress and ValueChanged events:
function createMaskEdit() {
// Create an input editor
maskEdit = new PP.Ui.MaskEdit({
// Set parent element
ParentNode: document.getElementById("maskEdit"),
// Set array of allowed characters
AllowedSymbols: ["0", "1", "2", "3", "4", "5"],
// Set input editor value change event handler
ValueChanged: function (sender, args) {
console.log("Input editor value is changed");
}
});
// Set value change step
maskEdit.setStep(1);
// Set keyboard press event handler
maskEdit.KeyPress.add(function (sender, args) {
// Check if the entered character is allowed
if (contains(this._AllowedSymbols, args.Event.charCode)) {
// After the allowed character is entered, the input editor is set with style for allowed values
this.applyValidCSS();
} else {
// After the not allowed character is entered, the input editor is set with styles for not allowed values
this.applyNotValidCSS();
}
});
}
// Function for checking character occurrence in array
function contains(arr, codeSymbol) {
var i = 0;
while (arr[i] != undefined) {
if (arr[i].charCodeAt(0) == codeSymbol) {
return true;
}
i++;
}
return false;
}
Input the 0 character in input editor. The character is inputted because it is authorized and the input editor implements the style for available characters:
The console displays a message about input editor value changing:
Input editor value is changed
Input the 6 character in input editor. The character is not inputted because it is not authorized and the input editor implements the style for unavailable characters:
See also: