misza222/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content='text/html' http-equiv='Content-Type' />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Example</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="util.js"></script>
    <script type="text/javascript">
      $(function() {
        defaultize($("input[title][type='text'], input[title][type='password']"));
      });
    </script>
    <style type="text/css">
      input.defaultValue { color: gray; }
    </style>
  </head>
  <body>
    <p>The aim of this script is to show default text (taken from element's title attribute) for empty input[type=text] and input[type=password] elements.</p>
    <p>For password elements it is not that trivial though. If I did <code>$(this).attr('value', $(this).attr('title'));</code> for input[type=password] it would just show dots instead of default text. Changing type of the element (from password to text in this case) is not widely supported either. So the only way is to replace input[type='password'] with input[type='text'] element(util.js:26). This replacement seems to reset page tab index in IE and start from the begining of the page. Other browsers behave as expected.</p>
    <p>Do you have any idea how to fix it?</p>
    <p>
      <a href="">Link 1</a>
    </p>
    <form action="" method="post">
      <ul>
        <li>
          <input type="text" name="login" title="Login" />
        </li>
        <li>
          <input type="password" name="password" title="Password" />
        </li>
      </ul>
      <p>
        <input type="submit" value="Log in" />
        <input type="button" value="Register" />
      </p>
    </form>
  </body>
</html>

## util.js
function defaultize(elements) {
  elements.each(function() {
    $(this).focus(clearDefaultValuesOnFocus);
    $(this).blur(applyDefaultValuesOnBlur);
    $(this).blur();
  });
}

function clearDefaultValuesOnFocus(event) {
  if(($(this).attr('value') == undefined || $(this).attr('value') == $(this).attr('title')) && $(this).attr('title') != '') {
    $(this).attr('value', '').removeClass('defaultValue');

    if($(this).attr('name').match(/password/i) && $(this).attr('type').match(/text/i)) {
      replaceInputTextWithInputPassword($(this));
    }
  }
}

function applyDefaultValuesOnBlur(event) {
  if(($(this).attr('value') == undefined || $(this).attr('value') == '') && $(this).attr('title') != '') {
    $(this).attr('value', $(this).attr('title')).addClass('defaultValue');

    if($(this).attr('name').match(/password/i) && $(this).attr('type').match(/password/i)) {
      replaceInputPasswordWithInputText($(this));
    }
  }
}

function replaceInputPasswordWithInputText(password_field) {
  var text_field = $("<input type='text' />");
  copyAttributes(password_field, text_field);
  password_field.replaceWith(text_field);
  password_field.remove(); // to make sure all event handlers are removed
  //text_field.blur(); // previous field lost focus so we do not need to blur it
}

function replaceInputTextWithInputPassword(text_field) {
  var password_field = $("<input type='password' />");
  copyAttributes(text_field, password_field);
  text_field.replaceWith(password_field);
  text_field.remove(); // to make sure all event handlers are removed
  // setting focus on newly replaced element delaying it first as on
  // http://stackoverflow.com/questions/102055/adding-an-input-field-to-the-dom-and-focusing-it-in-ie
  setTimeout('setFocus',0);
}

function setFocus() {
  password_field.focus();
}

/* TODO: when tabbing through the form new element does not always get focus when it should */
function copyAttributes(from, to) {
  var attrs = ['name', 'style', 'class', 'title', 'value'];

  for(i in attrs) {
    if(from.attr(attrs[i]) != undefined) {
      to.attr(attrs[i], from.attr(attrs[i]));
    }
  }
  to.focus(clearDefaultValuesOnFocus);
  to.blur(applyDefaultValuesOnBlur);
}
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'>
	<head>
	<meta content='text/html' http-equiv='Content-Type' />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Example</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="util.js"></script>
	<script type="text/javascript">
	$(function() {
	defaultize($("input[title][type='text'], input[title][type='password']"));
	});
	</script>
	<style type="text/css">
	input.defaultValue { color: gray; }
	</style>
	</head>
	<body>
	<p>The aim of this script is to show default text (taken from element's title attribute) for empty input[type=text] and input[type=password] elements.</p>
	<p>For password elements it is not that trivial though. If I did <code>$(this).attr('value', $(this).attr('title'));</code> for input[type=password] it would just show dots instead of default text. Changing type of the element (from password to text in this case) is not widely supported either. So the only way is to replace input[type='password'] with input[type='text'] element(util.js:26). This replacement seems to reset page tab index in IE and start from the begining of the page. Other browsers behave as expected.</p>
	<p>Do you have any idea how to fix it?</p>
	<p>
	<a href="">Link 1</a>
	</p>
	<form action="" method="post">
	<ul>
	<li>
	<input type="text" name="login" title="Login" />
	</li>
	<li>
	<input type="password" name="password" title="Password" />
	</li>
	</ul>
	<p>
	<input type="submit" value="Log in" />
	<input type="button" value="Register" />
	</p>
	</form>
	</body>
	</html>
	function defaultize(elements) {
	elements.each(function() {
	$(this).focus(clearDefaultValuesOnFocus);
	$(this).blur(applyDefaultValuesOnBlur);
	$(this).blur();
	});
	}

	function clearDefaultValuesOnFocus(event) {
	if(($(this).attr('value') == undefined \|\| $(this).attr('value') == $(this).attr('title')) && $(this).attr('title') != '') {
	$(this).attr('value', '').removeClass('defaultValue');

	if($(this).attr('name').match(/password/i) && $(this).attr('type').match(/text/i)) {
	replaceInputTextWithInputPassword($(this));
	}
	}
	}

	function applyDefaultValuesOnBlur(event) {
	if(($(this).attr('value') == undefined \|\| $(this).attr('value') == '') && $(this).attr('title') != '') {
	$(this).attr('value', $(this).attr('title')).addClass('defaultValue');

	if($(this).attr('name').match(/password/i) && $(this).attr('type').match(/password/i)) {
	replaceInputPasswordWithInputText($(this));
	}
	}
	}

	function replaceInputPasswordWithInputText(password_field) {
	var text_field = $("<input type='text' />");
	copyAttributes(password_field, text_field);
	password_field.replaceWith(text_field);
	password_field.remove(); // to make sure all event handlers are removed
	//text_field.blur(); // previous field lost focus so we do not need to blur it
	}

	function replaceInputTextWithInputPassword(text_field) {
	var password_field = $("<input type='password' />");
	copyAttributes(text_field, password_field);
	text_field.replaceWith(password_field);
	text_field.remove(); // to make sure all event handlers are removed
	// setting focus on newly replaced element delaying it first as on
	// http://stackoverflow.com/questions/102055/adding-an-input-field-to-the-dom-and-focusing-it-in-ie
	setTimeout('setFocus',0);
	}

	function setFocus() {
	password_field.focus();
	}

	/* TODO: when tabbing through the form new element does not always get focus when it should */
	function copyAttributes(from, to) {
	var attrs = ['name', 'style', 'class', 'title', 'value'];

	for(i in attrs) {
	if(from.attr(attrs[i]) != undefined) {
	to.attr(attrs[i], from.attr(attrs[i]));
	}
	}
	to.focus(clearDefaultValuesOnFocus);
	to.blur(applyDefaultValuesOnBlur);
	}