Way 2 Web

Web development tips


 
Text Input Prompt

Introduction

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).

API

Constructor

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

Demo

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]

Code

HTML

<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>

Javascript

<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");        
    }
</script>

Css

.input-prompt{
    color: gray;
    text-indent: 5px;
    cursor: pointer;
}
#txtName-input-prompt{
    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]

Files

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

[Top of page]

Recommendations