Form element styler on focus text

BigG · October 25, 2012, 11:43am

Am I correct in thinking that the FES action which has the onfocus and onblur options allows for text to be added to form fields?

If so, it doesn’t work for me. Is something else required?

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

BigG · October 25, 2012, 12:06pm

Just downloaded the latest version and the Extended onfocus / onblur is no longer in the action.

I have seen a few posts relating to the form field text - seems a simple thing to have, but managed to get it working. Is there a simple explanation/example?

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

Tim3 · October 25, 2012, 12:55pm

Hi Nathan,

Select the form element
Select Item > Extended
Select the Input tab (if not already selected)
Click the New… button
Enter
name: placeholder
value: anything you like really
Press OK
Press OK (again) to return to your Freeway page
Preview and your placeholder text should be displayed in the form input item
Make a decision if you care about the page not validating in less than HTML 5 pages
There is no step 10!

Regards,
Tim.

On 25 Oct 2012, at 13:06, BigG wrote:

I have seen a few posts relating to the form field text - seems a simple thing to have, but managed to get it working. Is there a simple explanation/example?

Experienced Freeway designer for hire - http://www.freewayactions.com

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

waltd · October 25, 2012, 1:06pm

Make a decision if you care about the placeholder text only appearing in IE 9 or above.

Walter

On Oct 25, 2012, at 8:55 AM, Tim Plumb wrote:

Make a decision if you care about the page not validating in less than HTML 5 pages

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

waltd · October 25, 2012, 1:23pm

Oh, and to be clear, this only refers to IE – Safari, Chrome, Firefox, Opera – all the “long-pants” browsers – will display this properly.

Walter

On Oct 25, 2012, at 9:06 AM, Walter Lee Davis wrote:

Make a decision if you care about the placeholder text only appearing in IE 9 or above.

Walter

On Oct 25, 2012, at 8:55 AM, Tim Plumb wrote:

Make a decision if you care about the page not validating in less than HTML 5 pages

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

Tim3 · October 25, 2012, 1:45pm

I knew there must have been a step 10!

On 25 Oct 2012, at 14:06, Walter Lee Davis wrote:

Make a decision if you care about the placeholder text only appearing in IE 9 or above.

Experienced Freeway designer for hire - http://www.freewayactions.com

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

BigG · October 25, 2012, 1:49pm

Thanks folks. Much appreciated.

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

BigG · October 25, 2012, 1:51pm

So I would have to employ another method for IE 8 and under?

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

BigG · October 25, 2012, 1:57pm

I suspect javascript?

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

waltd · October 25, 2012, 1:59pm

Yes. What I would do is employ a “polyfill” for the standard behavior. Basically, it’s a JavaScript “shim” that only fires when the correct standards way of doing it won’t work. That way it only annoys the IE 8 and lower users, rather than slowing everyone else down as well.

Let me see if I can dig something out, I’ve solved this problem about a hundred times.

Walter

On Oct 25, 2012, at 9:51 AM, BigG wrote:

So I would have to employ another method for IE 8 and under?

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

waltd · October 25, 2012, 2:18pm

Okay, this should work for you:

gist.github.com

https://gist.github.com/walterdavis/3952756

gistfile1.js

var _test = document.createElement('input');
if( ! ('placeholder' in _test) ){
  //we are in the presence of a less-capable browser
  $$('*[placeholder]').each(function(elm){
    if($F(elm) == ''){
      var originalColor = elm.getStyle('color');
      var hint = elm.readAttribute('placeholder');
      elm.setStyle('color:gray').setValue(hint);
      elm.observe('focus',function(evt){
        if($F(this) == hint){

This file has been truncated. show original

Apply the Protaculous Action to your page, choose Prototype-packed from the Library picker, and paste in that code. The only tiny wrinkle here is that the script will never let you enter the placeholder text as the actual entry value, so choose your placeholders wisely! (This will only be an issue if someone named First Last tries to submit your form with IE.)

Walter

On Oct 25, 2012, at 9:59 AM, Walter Lee Davis wrote:

Yes. What I would do is employ a “polyfill” for the standard behavior. Basically, it’s a JavaScript “shim” that only fires when the correct standards way of doing it won’t work. That way it only annoys the IE 8 and lower users, rather than slowing everyone else down as well.

Let me see if I can dig something out, I’ve solved this problem about a hundred times.

Walter

On Oct 25, 2012, at 9:51 AM, BigG wrote:

So I would have to employ another method for IE 8 and under?

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

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

BigG · October 25, 2012, 3:31pm

Have applied that to the page, but nothing has changed in IE8.

I pasted it in the first function dialogue box.

http://www.newyoubootcamp.com/promotions.html

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

waltd · October 25, 2012, 4:23pm

I corrected the Gist to use a better test for placeholder support. Copy the code again and update what you pasted into Protaculous.

http://scripty.walterdavisstudio.com/placeholder.html

You also have a zillion JavaScript errors on your page, mostly to do with cross-domain requests from Twitter or something like that. Develop / Show Error Console (in Safari) for the hideous news.

Walter

On Oct 25, 2012, at 11:31 AM, BigG wrote:

Have applied that to the page, but nothing has changed in IE8.

I pasted it in the first function dialogue box.

http://www.newyoubootcamp.com/promotions.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

BigG · October 26, 2012, 2:08pm

Hmm the errors are annoying. Those twitter buttons etc. are the ones freeway inputs

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

BigG · October 26, 2012, 2:17pm

Thanks for the updated gist Walter - works a treat.

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