PDA

View Full Version : Textbox watermarks tutorials?

gamict
10-29-2009, 09:49 PM
Hello all,
I am working on my website and I really want to use "watermark texts" (what facebook has on their login page) but I've only found tutorials on it for AJAX, I'm building my site in PHP. (I've heard you can't mix the two languages?)


So my question is where can I find information/tutorials for PHP versions? (facebook is built in PHP so I'm assuming it's possible via PHP)

Thanks in advance!

-gamict
Old Pedant
10-29-2009, 11:48 PM
And you are asking a PHP question in an ASP forum because????

And are you talking about a "CAPTCHA" test? (Also sometimes spelled "CAPCHA".)

If so, Google "CAPTCHA PHP" and find thousands of examples.

But ask the next question in a PHP forum. PHP and ASP are about as alike as...oh...English and German??
gamict
10-29-2009, 11:55 PM
No, not captcha.

A perfect example is on the facebook login page. You can see watermark text inside their login boxes (username/password)

I posted it here because the only results I could find for this cool feature was under AJAX.....Which I'm building in PHP and was hoping the wonderful coders of ASP would know the term used for the PHP version.

However, I'll repost this under PHP if the mods feel to close/delete this post.

Thanks anyways xD
Old Pedant
10-30-2009, 05:37 AM
Oh! Is *that* all!

Nothing to do wtih either ASP or PHP!

Strictly CSS and JavaScript.

I'll bet I could do the same thing first try.

Let's see... I'm not even going to cheat. I'll type it in here first and then actually try it out.

<form>
<input style="color: lightgrey;" value="watermark"
onfocus="this.style.color='black'; if(this.value=='watermark')this.value='';"
onblur="if(this.value==''){this.style.color='lightgrey';this.value='watermark';">
</form>

Okay...now I'll go try it out.
Old Pedant
10-30-2009, 05:42 AM
Okay...I missed a } right brace in the onblur.

And the lightgrey color is too light.

And if the user just types in a single space, then it's accepted and the watermark doesn't reappear. (Debatable as to whether or not that's a flaw...probably should be page designer's choice.)

So:

<html><body>
<form>
<input style="color: gray;" value="watermark"
onfocus="this.style.color='black'; if(this.value=='watermark')this.value='';"
onblur="if(this.value.replace(/\s/g,'')==''){this.style.color='gray';this.value='watermark';}">
</form>
</body></html>
Old Pedant
10-30-2009, 05:44 AM
Of course, FaceBook (and others) hide all that in the ".js" files and CSS clases, but it's really all done the same way.