Example of Creating the TextBox Component

To execute the example, create an HTML page and perform the following operations:

1. Add a link to PP.css and PP.js files.

2. Next in the <head> tag set style for the element with the ID "TL":

<style>
    #TL {
        border-color: #CCCCCC;
        border-width: 0px;
        border-style: solid;
        width: 300px;
    }
</style>

3. Inside the <body> tag place the block with the ID "TL" :

<div id="TL"></div>
 

4. Add an image named bc-close.png stored at the path build/Img.

5. Next add a script that creates text entry box within the <body> tag:

<script type="text/javascript">
    // Create a text box component
    var textBox = new PP.Ui.TextBox({
        ParentNode: "TL", // Parent container identifier	
        EnableEdit: false, // Deny editing
        ImageAlign: PP.LTRB.Left, // Background image position
        ImageUrl: "build/Img/bc-close.png", // Image URL		    
        ImageWidth: 10, // Image width
        IsWatermark: true, // Indicates whether transparent text is rendered if component field is empty and inactive
        MaxLength: 24, // Maximum text length in component
        WatermarkText: "Text box" // Transparent text value if component field is empty or inactive
    });
</script>

After the example execution the PP.Ui.TextBox component is placed on the HTML page:

See also:

TextBox