Temporary text, not sure what it's called...

BrianM · June 13, 2008

I do believe it's some sort of Javascript, but how do people get text in an input field and when somebody clicks the field, the text goes away and if they click outside of the input field, the default text returns if the field contains no content from the user.

xtopolis · June 13, 2008

Example

So, I spent about 1 hour writing and figuring this out because I wanted to know too, lol. I used the following:

1) One hidden and disabled <input> field.

2) onfocus, pass the current value to the hidden/disabled input value

3) onblur, validate (i used a regular expression) , if it fails, replace the value with the one stored in the hidden/disabled

It should accomplish the basics of what you want, enjoy.

<html>
<head>
<style type="text/css">
  input#hide {
    display: none;
  }
</style>
<script type="text/javascript">
function MouseEvent(e)
{
  if(e.target) {
    this.target = e.target;
  }else{
    this.target = e.srcElement;
  }
} // mouseevent
function clearField(e,tID)
{
  var e = new MouseEvent(e);
  
    var y = e.target;
    var x = document.getElementById(tID);
    
    x.value = y.value;
    y.value = '';

  return false;
}

function checkField(e,tID)
{
  var e = new MouseEvent(e);
    var x = document.getElementById(tID);
    var y = /\w{1,}/.test(e.target.value);
    
    if(!y)
    {
      e.target.value = x.value;
    }
    
  return false;
}
</script>
</head>

<body>
<form name="myForm">
  <input type="text" name="fn" value="Firstname" onfocus="return clearField(event,'hide')" onblur="return checkField(event,'hide')" />
  <input id="hide" value="Test" DISABLED />
</form>

</body>
</html>

Psycho · June 13, 2008

That code will "blank out" the user entered value when you click on the field. So, if theusr needs to edit their entered value they have to retype the whole thing.

I have a script that is very easy to implement with the following steps:

1. Include the external js file

2. [optional] Create an ".inputPrompt" class so the prompts are displayed appropriately

3. In the text fields that need a prompt, simply add a prompt parameter:

<input name="name" type="text" prompt="Enter your name">

4. Add an onload parameter to run the "initializePrompts()" function.

All input's with a prompt parameter will dynamically have an onload and onblur event created.

Test Page:

<html>
<head>
<script type="text/javascript" src="input_prompts.js"></script>

<style>
.inputPrompt { font-style:italic; color: #969696; }
</style>

</head>

<body onload="initializePrompts()">

Name: <input name="name" type="text" prompt="Input Name">

</body>

</html>

External js file "input_prompts.js":

function initializePrompts() {

    var oinputs = document.getElementsByTagName('input');
    for (var i = 0; i < oinputs.length; i++) {
        //insert the prompt text if there is a prompt value
        if (oinputs[i].getAttribute('prompt')) {
            createPromptEvents(oinputs[i]);
        }
    }

    var oinputs = document.getElementsByTagName('textarea');
    for (var i = 0; i < oinputs.length; i++) {
        //insert the prompt text if there is a prompt value
        if (oinputs[i].getAttribute('prompt')) {
            createPromptEvents(oinputs[i]);
        }
    }
}

function createPromptEvents(fieldObj) {

    //Create the onfocus event
    var oldFocus = fieldObj.onfocus;
    fieldObj.onfocus = function () {
        if (this.className=='inputPrompt') {
            this.value = '';
            this.className = '';
        }
    }

    if (oldFocus) { //Restore original focus event
        try { fieldObj.addEventListener('focus', oldFocus, true); }
        catch (e) { fieldObj.attachEvent('onfocus', oldFocus) }
    }

    //Create the onblur event
    var oldBlur = fieldObj.onblur;
    fieldObj.onblur = function () {
        if (this.value=='') {
            this.value = this.getAttribute('prompt');
            this.className = 'inputPrompt';
        }
    }

    if (oldBlur) { //Restore original blur event
        try { fieldObj.addEventListener('blur', oldBlur, false); }
        catch (e) { fieldObj.attachEvent('onblur', oldBlur) }
    }

    //Set the initial prompt value
    fieldObj.focus();
    fieldObj.blur();
}

function loadPrompts(loadSwitch) { //ADD TO ONSUBMIT FORM EVENTS

    //Load or unload the prompts
    var oinputs = document.getElementsByTagName('input');
    for (var i = 0; i < oinputs.length; i++) {
        loadSinglePrompt(oinputs[i], loadSwitch);
    }
    var oinputs = document.getElementsByTagName('textarea');
    for (var i = 0; i < oinputs.length; i++) {
        loadSinglePrompt(oinputs[i], loadSwitch);
    }
}

function loadSinglePrompt(fieldObj, loadSwitch) {

    //insert the prompt text if there is a prompt value
    if (fieldObj.className=='inputPrompt') {
        if (loadSwitch) {
            fieldObj.focus();
            fieldObj.blur();
        } else {
            fieldObj.value='';
        }
    }
    return;
}

Sign In

Temporary text, not sure what it's called...

Recommended Posts

BrianM

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information