Home/ Questions/Q 586433
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T15:06:24+00:00

//Set default values $(‘#name’).val(‘First Last’); $(‘#email’).val(‘you@email.com’); $(‘#subject’).val(‘Subject’); $(‘#message’).val(‘Message’); //Change style when user types $(‘#name,#email,#subject,#message’).keypress(function()

  • 0
    //Set default values
 $('#name').val('First Last');
 $('#email').val('you@email.com');
 $('#subject').val('Subject');
 $('#message').val('Message');
    //Change style when user types
 $('#name,#email,#subject,#message').keypress(function() {
  $(this).css({
   'color':'black',
   'font-style':'normal'
   });
 });
    //Check each input for change
 $('#name').focusin(function(){
  if($(this).val() == 'First Last') {
   $(this).val('');
  }
 });
 $('#name').focusout(function() {
  if($(this).val() == '') {
   $(this).val('First Last');
   $(this).css({
    'color':'grey',
    'font-style':'italic'
    });
  }
 });
 $('#email').focusin(function(){
  if($(this).val() == 'you@email.com') {
   $(this).val('');
  }
 });
 $('#email').focusout(function() {
  if($(this).val() == '') {
   $(this).val('you@email.com');
   $(this).css({
    'color':'grey',
    'font-style':'italic'
    });
  }
 });
 $('#subject').focusin(function(){
  if($(this).val() == 'Subject') {
   $(this).val('');
  }
 });
 $('#subject').focusout(function() {
  if($(this).val() == '') {
   $(this).val('Subject');
   $(this).css({
    'color':'grey',
    'font-style':'italic'
    });
  }
 });
 $('#message').focusin(function(){
  if($(this).val() == 'Message') {
   $(this).val('');
  }
 });
 $('#message').focusout(function() {
  if($(this).val() == '') {
   $(this).val('Message');
   $(this).css({
    'color':'grey',
    'font-style':'italic'
    });
  }
 });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a number of plugins out there that handle this style of In-Field Labels.

    1. In Field Labels — I wrote this one, and it uses positioning to move the label over (or under via z-index) the input area. It has the added benefit of not disappearing completely even after the field has focus. It only hides fully when the user starts to type.
    2. Labelify — Never used it, but it follows your approach of swapping out actual text values.
    • 0