Blur: function(sender, args, timeout);
sender. Event source.
args. Event information.
timeout. Time delay (milliseconds) after which the event is fired.
The Blur event occurs when the text field loses focus.
To execute the example, the page must contain the TextBox component named textBox (see Example of Creating the TextBox Component). Create the second text box with the hidden text, handle the following events: Blur, Focus, ImageClick, ImageMouseDown, ImageMouseUp, ValueChanged, set focus for the text box:
// Set transparent text of the first text box
textBox.setWatermarkText("Text box 1");
// Create the second text box
var textBox2 = new PP.Ui.TextBox({
ParentNode: "TL", // Identifier of the parent container
EnableEdit: true, // Editability
MaxLength: 24, // Text maximum length in the component
IsPassword: true // Attribute that text is hidden
});
// Set text for the second text box
textBox2.setContent("Text box 2");
// Set focus removing event handler
textBox.Blur.add(function (sender, args, timeout) {
console.log("The Blur event is initialized")
});
// Set handler of the focusing event
textBox2.Focus.add(function (sender, args, timeout) {
console.log("The Focus event is initilized")
});
// Set handler of the background image pressing event
textBox.ImageClick.add(function (sender, args, timeout) {
console.log("The ImageClick event is initialized")
});
// Set the handler of the mouse down the background image event
textBox.ImageMouseDown.add(function (sender, args, timeout) {
console.log("The ImageMouseDown event is initialized")
});
// Set the handler of the background image mouse up event
textBox.ImageMouseUp.add(function (sender, args, timeout) {
console.log("The ImageMouseUp event is initialized")
});
// Set focus in the first text box
textBox.setFocus();
// Deselect focus from the first text box
textBox.blur();
// Set focus in the second text box
textBox2.setFocus();
After executing the example the second text box with a hidden text is created:
The browser console displays information that the handled events have been fired:
The Blur event is initialized
The Focus event is initialized
After clicking on the image of the first text box, the following messages display informing about fired handled events:
The ImageMouseDown event is initialized
The ImageMouseUp event is initialized
The ImageClick event is initialized