Ajax JavaScript CSS HTML 5 DOM

Label and Textbox

HTML has an object named input to allow the user to enter data, but the equivalent XUL widget is named textbox.
Contrary to HTML, textbox can comprise several lines once the attribute multiline is added to the declaration:

<textbox multiline= " true "/>

Attributes of textbox


Allows several lines. One must distinguish the number of possible lines and the number of lines displayed which depends on the attribute rows. When the first exceeds the second, a vertical scroll bar appears on the right.


The number of lines displayed at the beginning. This number does not limit the number of lines you can enter. Note that an additional line is displayed at bottom to make room to the horizontal scroll bar when the length of the text exceeds the width of the field.


Another attribute coming from HTML, indicates the default text, displayed at start in the text field.


Size permitted of the text inside the field.


The width in number of characters of the text field.


Used in conjunction with the timed type (see below).

Type of textbox

There are four types of text input fields. In addition to the regular type, three others can be specified by the type attribute:


Field allowing the functionality of auto-completion.


Similar to the HTML attribute, a field of password does not display the characters in echo but a star instead.


Used in conjunction with the timeout attribute it indicates that an event must be started after a given delay when something is entered in the text field.


The tag label is often used in conjunction with textbox, it is a simple line of text to be displayed.

<label value= "My displayed text"/>

The difference with the description tag is that label can be associated to another component thanks to the control attribute to which one assigns the id of this component.
For example if a textbox has a identifier "tb", the control attribute of label will be assigned:

<label control="tb" value= "My text"/>


Example of text input field with a single line at start but several allowed for the entered text.

<label control="tb" value="Enter a text:" />
<textbox id="tb" multiline="true" rows="1" size="40" value="empty" />
<button label="Display" oncommand="document.getElementById('tb').value);" />

We have associated a button to the form for testing the use of the text entered in the field, in fact one displays it in a JavaScript message box.
The access to the contents of the field is obtained with the DOM's method getElementByID, which is classical JavaScript code. We will see the use of the DOM with XUL in a chapter to come.


TextBox Elements And Backspaces

Thu, 04 Jun 2009 21:05:20


I am new to XUL and am attempting to get the current value in a TextBox by asking for the node Value. I am setting a default value in the texbox. This works for all situations except when the user completely backspaces the text in the textBox. By debugging through an event handler, I've seen the text change except when it comes to the very first character in the string ... it will not remove this character and in addition, it won't recognize any characters that I type after that. I'm executing the code through Arbortext ... Fragments from my java file:
//create a XUI document and insert XUI elements into it       
        String dtdPath = Application.getPath() + "/doctypes/xui/xui.dtd";
        Document xuiDoc = Application.openDocument("", 0x100, "", "", dtdPath);    
       String defaultValue ="equation";

 Range range = ((ADocument) xuiDoc).getInsertionPoint();
        ((ARange) range).insertParsedString(
            "<window orient='vertical' align='center' modal='true' title='Equation Name'>"
                + "<grid columns='2'>"
                + "<label id='eqLabel' label='&N_ame:' control='Name'/>"
                 + "<textbox id='eqName' width='200'>"
                 + "<value>" + defaultName + "</value>"
                 + "</textbox>"                 
                 + "</grid>"                
                 + "<spacer resize='none' height='10'/>"
                 + "<box orient='horizontal' pack='center'>"
                + "<button id='ok' label='OK' typ='accept'/>"
                + "<button id='cancel' label='Cancel' type='cancel'/>"
                + "</box>"
                + "</window>");

        //create a XUI dialog from the XUI document          
        Window xuiWin = Application.createDialogFromDocument(xuiDoc);        
        // locate the nodes by using their IDs         
        final Node okNode = xuiDoc.getElementById("ok");
        final Node cancelNode = xuiDoc.getElementById("cancel");
        final Node textBoxNode = xuiDoc.getElementById("eqName");
        final Node valueNode = textBoxNode.getFirstChild();
        final Node equationNode = valueNode.getFirstChild(); 

   EventListener okListener = new EventListener() {
            public void handleEvent(Event event) {
                if (valueNode != null ) {                    
                    //get the value for the equation name
                    String nodeValue = equationNode.getNodeValue();                  }

If I backspace the entire text in the textBox, I consistently get "e" when I query the nodeValue in the listener and as I mentioned previously, any text that I enter after that, is not recognized. Highlighting the field and clearing the contents and typing a new value works as well as just partially backspacing. Thanks, Jennifer
Sun, 05 Jun 2009 08:46:00


This combination of Java and dynamically generated XUL could not work very well. You should use JavaScript to access the content of XUL throught the DOM, and maybe call JavaScript from Java, but I have not used that yet.

Disabled textboxes

Mon, 22 Sep 2008 16:19:20


Hello, I have the following:
<textbox uri="?" value="?apellidos" id="apellidos" disabled = "true" />
when a button is pressed, the following code is executed:
The problem is that the textbox is always disabled. The same problem ocurrs with the readonly attribute. Regards, Miguel
Thu, 25 Sep 2008 11:13:48


Hello, do you have verified that other JavaScript code works? You can try this:
x = document.getElementById("apellidos")
x.setAttribute("disabled", "true")
The code is splitted to allow to check that x holds the element:
Licence: © 2007-2013 Xul.fr