scriptygoddess

1 | Sue

April 1st, 2004 at 11:40 am

Excellent tip, Jen! I can see some uses for it right now..

2 | xiopher

April 1st, 2004 at 4:09 pm

You could combine this with a dropdown box and that would make it a editable dropdownbox

3 | Duncan Campbell

April 1st, 2004 at 6:07 pm

http://www.versiontracker.com uses the same technique (look in the top right hand corner).

Good tip.

BTW – how do you get the graphic/code thing working – this seems to me to be the solution to the spam i am getting on my blog.. if you could email me that would rock.

Cheers.

4 | Pia

April 2nd, 2004 at 3:42 am

Great tip!! Thanks so much, this is indeed helpful!

5 | Gabriel Radic

April 2nd, 2004 at 4:19 am

Since you are learning CSS, you may want to improve your code with visual cues…

onFocus="if(this.value=='Search'){value=";this.style.color="#CCC";this.style.fontWeight="normal";}"

onBlur="if(this.value=="){value='Search';this.style.color="#000";this.style.fontWeight="bold";}"

Or you could create a class to change those properties, like this:

onFocus="if(this.value=='Search'){value="";this.className="noText"}
onBlur="if(this.value=="){value='Search';this.className=""}"

6 | Mark J

April 2nd, 2004 at 6:27 pm

Duncan,
She's using James Seng's Scode.

You can download it here (it has instructions inside): Scode

I've been using it since October (about a month after I converted my blog to Movable Type) and I haven't gotten a SINGLE comment spam! Just, as Jennifer and I have done, make sure you put a disclaimer under it with an e-mail address or link where people can mail comments. You don't want to strand viewers using text browsers. What I did is include a link to a form where they can e-mail me, and I have the link pass on the entry id via PHP, so when I get the mail, I know what entry they are commenting on.

And finally, Jennifer, this is some really slick code… I can't tell you how frustrating it is when people put default text in there, and you HAVE TO ERASE IT. Ugh. This is much better.

7 | Mark J

April 5th, 2004 at 7:42 am

One little tweak:

Although it is in good JavaScript "form" to capitalize functions likeIAmDoingHere, and is fine to do within a <script> tag, the XHTML validator will yell at you if you do it within a link. So anyone who cares about valid XHTML should change "onFocus" and "onBlur" to "onfocus" and "onblur".

8 | Julie W

April 25th, 2004 at 5:34 am

OK. Confession time here: I've never written a script in my life, but I am a computer-literate user of a system that's under construction where we'd really like to be able to have a combi box (i.e. something you can type into that ALSO drops down, preferably showing just those items in the drop down list that match what's already been typed – though frankly, the string matching part of it would be a bonus).

If it helps to understand what we're after, it's an order processing system, and the idea is to be able to type a product code if you know it (in which case the product description then gets added to a separate box), but have a dropdown list of options to choose from if you don't know the product code or can only guess at part of it. As an extra challenge, ideally the dropdown list would display both the code and the description field (but only select the code to fill in the code box).

At the moment, we have a text entry box. If the script finds an exact match to the product code entered by the user, it fills in the description in another (editable) text box. Otherwise it populates new drop down boxes with items that contain the text either in the product code or the description, which is somewhat clumsy, and then the product code can be selected from these, and the description filled in on the Product Description text box as before. (NB: The code and description are held separately because customers never get to see the product code, but we use it internally for sales reports.)

So, I was very interested in Xipoher's comment above "You could combine this with a dropdown box and that would make it a editable dropdownbox". How would you do this? I've been searching the web for ages now to find a way to do it with no success.

9 | Nancy

April 27th, 2004 at 2:49 pm

Funny thing…
When I add name and id attributes to my input field like this:

<input type="text" onfocus="if(this.value=='url')value=";" onblur="if(this.value==")value='url';" value="url" id="url" name="url"/>

the onfocus and onblur only work after I click in the field
Any ideas why? I've tried everything!

10 | eric

April 27th, 2004 at 6:21 pm

So this works great but how do I adapt it to work on a text area?

I need the multi line text area to have the "Message:" disappear when you click into that area. I want it to be consistent with the other form elements that I have established.

11 | eric

April 27th, 2004 at 6:22 pm

So this works great but how do I adapt it to work on a text area?

I need the multi line text area to have the "Message:" disappear when you click into that area. I want it to be consistent with the other form elements that I have established.

12 | Mark J

April 27th, 2004 at 6:36 pm

It's slightly different with a textarea, because the default value isn't specified in a value="Message:" switch, but is actually between the starting and ending textarea tags. So this is what you want.

<textarea name="text" onFocus="if(this.value==this.defaultValue)value="" onBlur="if(this.value==")value=this.defaultValue;">Message:</textarea>

13 | Mark J

April 27th, 2004 at 6:49 pm

Actually, I just discovered that the this.defaultValue method works for text inputs as well. You still have to specify a value="Search" switch, but instead of having to specify it 3 times like in Jenn's original method, you only have specify it as the value once.

Like so:

<input name="search" type="text" onfocus="if(this.value==this.defaultValue)value="" onblur="if(this.value==")value=this.defaultValue;" value="Search" size="10" maxlength="200">

14 | blogroll.co.uk

April 13th, 2004 at 9:40 pm

Tweak
Using a piece of code posted to Scripty Godesses page, I now have the Search bar in the top right a little more compact than it was … not a big tweak, but cool non the less….

15 | blogroll.co.uk

April 13th, 2004 at 9:40 pm

Tweak
Using a piece of code posted to Scripty Godesses page, I now have the Search bar in the top right a little more compact than it was … not a big tweak, but cool non the less….

16 | Code Novice

May 11th, 2004 at 11:45 pm

Scripty's Text Area Twofer
I'm creating a proposal for a possible corporate client and…

17 | joatBlog

June 22nd, 2004 at 6:44 am

Fill/clear forms
Scripty Goddes shows how to pre-fill a field entry and how to auto-clear it if the user clicks on the field….