Вот моя реализация , если не брать к вниманию Кросс-браузерное добавление событий, получается 20 строк -+.
Емулятор ie показывает что даже в 5 работает , только я что то сомневаюсь ...
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="utf-8">
<style>
input {
color: silver;
}
</style>
</head>
<div id="placeholder">
<input type="text" data-pl="abc" value='abc'>
<input type="text" data-pl="abc1" value='abc1'>
<input type="text" data-pl="abc11" value='abc11'>
<input type="text" data-pl="abc12" value='abc12'>
</div>
<div id="place">
<input type="text" data-pl="abc1" value='abc1'>
<input type="text" data-pl="abc2324" value='abc2324'>
</div>
[JS run]
<script>
function addevent(obj, e, h) {if (obj.addEventListener) { obj.addEventListener(e, h, false);} else if (obj.attachEvent) { obj.attachEvent('on'+e, h);} else { obj['on'+e]=function() { h();};}} function delevent(obj, e, h) { if (obj.removeEventListener) { obj.removeEventListener(e, h, false);} else if (obj.detachEvent) { obj.detachEvent('on'+e, h);} else {obj['on'+e]=null;}}
var fn = function (elem) {
var placeholder = document.getElementById(elem);
var o = {
focus: function (e) {
e = e.target || e.srcElement;
if(!e.type == 'text') return;
if(e.value == e.getAttribute('data-pl')) {
e.value = '';
e.style.color = 'black'
}
addevent(e, 'blur', o.blur);
},
blur: function (e) {
e = e.target || e.srcElement;
if(e.value === '' || e.value == ' ') {
e.value = e.getAttribute('data-pl');
e.style.color = 'silver';
}
delevent(e, 'blur', o.blur);
}
}
addevent(placeholder, 'click', o.focus);
}
var place1 = fn('placeholder')
var place2 = fn('place')
</script>
[/JS]
</html>