[Pro] remove text inside text field?

Freeway
1

http://www.justineasthall.com/contactjustineas.html

Hi - when you go to fill out the form you put the curser inside the text field but the text (Email, Name etc) inside that field remains - very off putting, is their a way to make the text disappear when you put the curser in there?

Cheers!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

If you have set the value as the “self-label” for the field, then you will get this behavior. There are other ways to set the label – I think Tim wrote an Action to do this a while back, based on some Prototype code I posted.

In an HTML5 document (or just in an HTML5-capable browser) you would use the placeholder attribute to do this trick, then the browser handles it for you. Try this trick: click once on your field, go to the third tab of the Inspector and remove the Value entirely. Then open up the Item / Extended dialog and in the input tab, click new, then enter name: placeholder, value: whatever the placeholder should be. Preview in a browser, and you should see pale gray text in the field with your placeholder text, and when you click into it, it should disappear.

Here’s a (Prototype) JavaScript hack that will provide this for any browser that doesn’t understand the standards:

var hasPlaceholder = new Element('input',{placeholder:'foo'});
if (!hasPlaceholder.placeholder == 'foo'){
	$$('input[type="text"], textarea').each(function(elm){ 
		elm['_placeholder'] = elm.readAttribute('placeholder'); 
		if($F(elm) == '') elm.setValue(elm._placeholder); 
		elm.observe('focus', function(evt){ 
			if($F(elm) == elm._placeholder) elm.clear(); 
		}); 
		elm.observe('blur', function(evt){ 
			if($F(elm) == '') elm.setValue(elm._placeholder); 
		}); 
	}); 
}

Now it won’t go so far as to style the placeholder as pale gray and so forth, but it will do for those whose browsers haven’t kept up.

Note that the placeholder attribute is not standard in HTML < 5, so you may get a validator warning for doing this trick in Freeway (since it doesn’t create an HTML5 DOCTYPE).

Walter

On Feb 14, 2012, at 6:12 AM, Justin Easthall wrote:

http://www.justineasthall.com/contactjustineas.html

Hi - when you go to fill out the form you put the curser inside the text field but the text (Email, Name etc) inside that field remains - very off putting, is their a way to make the text disappear when you put the curser in there?

Cheers!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thanks - where to I put the Hack?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Apply Protaculous to the page, click on the top Function Body button, paste in that code. Then go through your form and use the Item / Extended dialog to add a placeholder to each field that you want to have this behavior.

Walter

On Feb 14, 2012, at 11:24 AM, Justin Easthall wrote:

Thanks - where to I put the Hack?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Excellent - thanks Ill try out shortly…

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Getting an error on IE 8… And no placeholder text appearing hmmm - maybe Ill just add the text above the fields! Jess - who’d have though this was such a carry on…

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

k - moved the failing form to here -

http://www.justineasthall.com/contactjustineass.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

I don’t see the Protaculous code anywhere in this page source. Could you try the following, please:

  1. Apply Protaculous to the page.
  2. In the Actions palette, click on the top Function Body button and paste in the code I posted earlier.
  3. Upload to this same URL.

Walter

On Feb 14, 2012, at 12:11 PM, Justin Easthall wrote:

k - moved the failing form to here -

http://www.justineasthall.com/contactjustineass.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

apologies forgot to add when i did the new page

http://www.justineasthall.com/contactjustineass.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Right it just sent but the text is now the only thing missing…

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Take the Google Maps Actions off the page and try again. In fact, strip it down to just Protaculous and nothing else. I see an error in IE’s debugger, but it’s being thrown in main.js, which is part of Google Maps.

JavaScript errors can be very difficult to debug, because an error in one script can wrong-foot another script. So what you see wrong in the browser may not be where the error started.

Walter

On Feb 14, 2012, at 1:11 PM, Justin Easthall wrote:

apologies forgot to add when i did the new page

http://www.justineasthall.com/contactjustineass.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

sure understood - can see that error in the browser - its always been there generated by that map - il remove now

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options