Way 2 Web

Web development tips

Text Input Prompt


This widget graphically prompts the user to enter values for a text or textarea tag.

It superimposes a div tag containing your message of choice over the text field. This method ensures that the prompt text will not be mistaken for input in the text tag.

The widget ignores spaces when testing for valid input.

Change the style of the prompt text for a good visual effect (see demo below).



InputPrompt(targetID, promptText);
ID of the text target tag
Text to display when target is empty
[Top of page]


Input prompts

The textbox and textarea both have input prompts when they are empty.

Enter and delete the text to test out the prompt effect.

[Top of page]



<label for="txtName">Name:</label><input type="text" id="Text1" value="Daniel" />
<br />
<label for="txtNotes">Notes:</label><br />
<textarea id="Textarea1" name="txtNotes" rows="5" cols="40"></textarea>


<script language="javascript" src="../../js/x/x_core.js"></script>
<script language="javascript" src="../../js/x/x_dom.js"></script>
<script language="javascript" src="../../js/y/ylib.js"></script>
<script language="javascript" src="../../js/y/y_util.js"></script>
<script language="javascript" src="../../js/y/y_InputPrompt.js"></script>
<script language="javascript">
    window.onload = function(){
        var prompt = new ylib.widget.InputPrompt("txtName", 
                        "Enter name here"); 
        var prompt2 = new ylib.widget.InputPrompt("txtNotes", 
                        "Enter notes here");        


    color: gray;
    text-indent: 5px;
    cursor: pointer;
    text-decoration: underline;
label {
    margin-right: 10px;

All prompt elements are of class input-prompt and have an ID of the form <target element ID>-input-prompt

NOTE: Avoid using border effects, since the border will not match the text element borders for all browsers.

[Top of page]


Note: Make sure you have the latest version of all JavaScript files listed below.

[Top of page]