How to put explanatory text inside textboxes in a form and focus cursor on fields?

StackOverflow https://stackoverflow.com/questions/1032968

Question

Basically two parts of the question.

  1. How to put explanatory text inside textboxes in a form (like writing e-mail in the text area of a text box in a form) with styles (i.e. greyed out so that meant to suggest) like on facebook homepage.
  2. How to put cursor focus on a particular form-field as soon as the page loads (like google sign-in or facebook sign-in)

Is there javascript involved in any of the above procedures? if yes, please specify

  1. a non-javascript workaround and/or
  2. the javascript code doing what is needed
Was it helpful?

Solution

The first trick is just a preset value. And when you click the field it has an onclick function that checks. Is the value "Write your email here". If so, clear the field. If not do nothing.

It then has an onblur function that checks, is the field empty. If so, print "Write your email here" in it.

The 2nd one is JavaScript as well.

Here is an Example page with both these functions

<html>
<script type="text/javascript">
    function searchBox()
    {
        elem = document.getElementById("search");

        if(elem.value == "Search...")
        {
            elem.value = "";
        }
    }

    function searchBoxBlur()
    {
        elem = document.getElementById("search");

        if(elem.value == "")
        {
            elem.value = "Search...";
        }
    }

    function init()
    {
        document.getElementById("other_box").focus();
        }
        window.onload = init;
    </script>
<body>
    <input type="text" name="other_box" id="other_box" />
    <input type="text" name="search" id="search" value="Search..." onclick="searchBox()" onblur="searchBoxBlur()" />
</body>
</html>

OTHER TIPS

The first, quick and dirty:

<input name="foo" value="Default text OMG!" onfocus="if(this.value == 'Default text OMG!') this.value = ''"/>

Making that onfocus event a function in an external JavaScript file is recommend. That would yield:

External script:

function checkText(el,someText){ if(el.value == someText) el.value = ''}

Your input:

<input name="foo" value="Default text OMG!" onfocus="checkText(this,'Default text OMG!')"/>

The second: Give the input that you want "focused" an ID and do something like this:

<input id="foo" name="foo" value="Default text OMG!"/>

And in a script:

window.onload = function(){ document.getElementById('foo').focus() }

This will require javascript (via the jQuery framework). The following was quickly typed-up, and untested. May require some minor tinkering. If you have questions - ask :)

  1. Auto-focus Desired Element
  2. Change Element Text Color when out of focus
  3. Show default text, when user-provided text isn't present
/* Run our work once the document is ready (loaded */
$(document).ready(function(){

  /* Set initial state of field */
  $("input.first-name").val("First Name").css("color", "#CCCCCC");

  /* Attach logic to the .focus() event of our input field */
  $("input.first-name").focus(function(){

    /* What to do when this field is focused */
    $(this).val("").css("color", "#333333");

  }).blur(function(){

    /* What to do when the field is blurred */
    if ($(this).val() == "") {

      /* Set value to 'First Name,' and set color to light gray */
      $(this).val("First Name").css("color", "#CCCCCC");

    }

  });

  /* Autofocus our field */
  $("input.first-name").focus();

});

There is no non-JavaScript way to do the first part of your question. As far as the second part is concerned, it can be easily done with JavaScript, but even without it, most modern browsers add focus to the first input field.

JavaScript code

  1. Just set the value to the input field to your preset value:

    function focus_function()
{
if (this.value=="Enter email here") {
this.value="";
this.class="actualEmail";
}
}

function blur_function()
{
if (this.value=="") {
this.value="Enter email here";
this.class="preset";
}
}

    You can have two CSS classes: preset and actualEmail, and specify different colors, etc.

  2. Just have an onload function which puts focus on the required input field:

    window.onload = function() 
{
document.getElementById("email_field").focus();
}

There are non-standard attributes you may consider: placeholder (works in safari i guess) and autofocus (a part of HTML5 spec).

myField.focus();

That should place the cursor in myField when the page loads (if you place it at the end or in a $(document).ready() jQuery block). I have seen some inconsistent behavior with this in different browsers, so your mileage may vary.

As far as setting the color of a text field's input, I would set it to have a default value and add a separate CSS class when the user clicks into it:

And your CSS would look like:

.grayedInputField {
    color: gray;
}
.activeInputField {
    color: black;
}

And when the user clicks into the field, have javascript add a class to the field to change the text color, like so (again, jQuery):

 $(".grayedInputField").focus(function(){$(this).addClass("activeInputField")});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top