PDA

View Full Version : in a textbox appear a start message eg "write it here" and after get focus disappear



leonidassavvides
02-20-2009, 10:45 AM
How in a textbox appear a start message eg "write it here" and after get focus disappear, and if visitor write any to textbox, never appear again ?

Snookerman
02-20-2009, 11:16 AM
Try this:

<input type="text" value="write it here" onFocus="javascript:if(this.value=='write it here')this.value='';" onBlur="javascript:if(this.value=='')this.value='write it here';">Good luck!

codeexploiter
02-20-2009, 11:46 AM
Here it is



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.gray{color: #EFEFEF}
.black{color: #000}
</style>
<script type="text/javascript">
//The addEvent and removeEvent code was developed by John Resig.
//I have used this code for handling the events in a cross browser manner.
//http://ejohn.org/projects/flexible-javascript-events/
function addEvent(obj, type, fn) {
if (obj.attachEvent) {
obj['e' + type + fn] = fn;
obj[type + fn] = function() {
obj['e' + type + fn](window.event);
}
obj.attachEvent('on' + type, obj[type + fn]);
} else obj.addEventListener(type, fn, false);
}

function removeEvent(obj, type, fn) {
if (obj.detachEvent) {
obj.detachEvent('on' + type, obj[type + fn]);
obj[type + fn] = null;
} else obj.removeEventListener(type, fn, false);
}
//John Resig's code ends here

addEvent(window,"load",function(){
addEvent(document.forms['f'].elements['n'],"keydown",keydownEventHandler);
});

function keydownEventHandler(){ removeEvent(document.forms['f'].elements['n'],'keydown',keydownEventHandler);
document.forms['f'].elements['n'] .className = 'black';
document.forms['f'].elements['n'].value = '';
}
</script>
</head>
<body>
<form name="f">
<input type="text" name="n" value="Write it here" class="gray"/>
</form>
</body>
</html>


Hope this helps

codeexploiter
02-20-2009, 11:55 AM
Try this:

<input type="text" value="write it here" onFocus="javascript:if(this.value=='write it here')this.value='';" onBlur="javascript:if(this.value=='')this.value='write it here';">Good luck!

Two issues that I've noticed:

1. It would be better if you avoid the usage of inline script especially if they are lengthy as it makes the markup unreadable.

2. In your code if the person wants to enter 'write it here' itself it won't be possible. I don't have any idea about if the user wishes to avoid such a word though.

Snookerman
02-20-2009, 12:08 PM
Two issues that I've noticed:

1. It would be better if you avoid the usage of inline script especially if they are lengthy as it makes the markup unreadable.

2. In your code if the person wants to enter 'write it here' itself it won't be possible. I don't have any idea about if the user wishes to avoid such a word though.
1. Personal opinion. Also, not really an issue, just a suggestion.
2. Would work just fine. Did you try it?

codeexploiter
02-20-2009, 12:26 PM
1. Personal opinion. Also, not really an issue, just a suggestion.

I suppose we can consider the coding standards too like an opinion. Because even if you don't use them you'll get the output, right?


2. Would work just fine. Did you try it?

Say for example: open the page in which your input box resides. Click on the text box, the default text vanishes. Now enter the - write it here - . Next step click the text box again and see what? The text again vanishes, that means the input entered by the user is erased the second time.