How can I clear the delault value when it get's clicked on?

Could someone please help me with this?

Thanks

Comments

vernond’s picture

You could probably achieve this via some custom javascripting, but be careful that you don't remove the value if it's different from the original default (that is, if the user clicks on the field again after changing the value).

quicksketch’s picture

What you're describing isn't typical use of the "default" field, it's what HTML5 would call a "placeholder" attribute. Unfortunately placeholder attributes aren't supported in older browsers (IE8 and before), so you might want to look into these projects:

http://drupal.org/project/compact_forms
http://drupal.org/project/hint
http://drupal.org/project/placeholder

Note that I don't think any of these project have any direct support for Webform module.

quicksketch’s picture

Title:Remove delfault value» Add support for HTML5 placeholder attribute
Category:task» feature

I'm changing this to a feature request. I'd love to get some kind of built-in support for placeholder, though with browser support so limited at this point, I feel like we'd have to depend upon another module or JS library (possibly bundled) to provide backwards compatibility.

It looks like http://drupal.org/project/html5_tools already supports #placeholder, but I'll need to look into it further. There's also a good list at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills of libraries that support the placeholder attribute if we're looking into bundling one.

klonos’s picture

...spam :/

celstonvml’s picture

StatusFileSize
new2.31 KB

I created a patch to accomplish this. On both the email and textfield component forms, it adds a field under the width field. It specifies the #parent for those fields as ('extra', 'attributes', 'placeholder'). I updated the respective default values to also include this data under 'attributes'. Drupal automatically renders attributes as-is, so it worked perfectly fine in my current instance.

FYI: my ultimate goal was to create a form in a block that would allow someone to sign up for a newsletter, without leaving the page. With a combination of Webform, Webform AJAX, Rules, Simplenews, Webform Rules, I was able to do this. The only PHP code I wrote was this patch. Kinda cool in my opinion.

quicksketch’s picture

Thanks @celstonbg! It'd be nice to ensure browser compatibility here. The placeholder attribute isn't supported in IE7/8/9 as far as I know, which is still currently about 30-40% of all browser usage.

celstonvml’s picture

@quicksketch, as it's been explained to me by my front-end partner, if the placeholder attribute is present and the browser doesn't support it (IE7, IE8, etc.), it's simply ignored and there are no adverse effects. So while I can appreciate the need to support those browsers, this patch also doesn't break them.

On a case by case basis, the developer/site builder could choose to incorporate a "shim" that would implement support for this feature through jQuery or other means.

https://github.com/danielstocks/jQuery-Placeholder
http://drupal.org/node/1077878
https://github.com/bevanr/jquery-html5-placeholder-shim

Your call but we personally need this feature for the current sites we're working on.

quicksketch’s picture

On a case by case basis, the developer/site builder could choose to incorporate a "shim" that would implement support for this feature through jQuery or other means.

Right, yes I agree that many (even "most") browsers already support placeholders and they don't do any harm in older browsers. A shim indeed would fix the problem for the older browsers also. However as the maintainer of Webform, I'm *very* aware that bundling a feature that only worked in some browsers but not others would not only be very confusing to a lot of users, but also generate a lot of support requests here in the Webform queue. If we can detect and use available shims and not add our own, I think that would be great; but if we're going to add a feature it needs to work reliably in all current browsers.

celstonvml’s picture

I had to tackle a similar problem dealing with an exposed filter on a View. While digging, someone suggested the HTML5 Tools module which depends on the Elements module:

http://drupal.org/project/elements

It adds support for the "#placeholder" FAPI element on textfields. What would say if I augmented my patch to leverage this approach but only offered the configurable element in Webform admin UI if that module was enabled? That way the feature is supported but only for those who have the necessary requirements met.

Thoughts?

jimlongo’s picture

Thanks @celstonbg! that patch works for my purposes. I managed to use your idea to also add the placeholder to textarea.

What also would be a nice mobile feature is the ability to have input types such as email, tel, url, etc., which switches iOS keyboard mode on entering that form field.
iOS supported Input Values

@quicksketch, I can understand not wanting to confuse drupal users, there's already more than enough ways to do that. And thank you for your great module.

jimlongo’s picture

Sorry for not checking before commenting, but the email input already does support that input type="email"

Thanks.

sokru’s picture

Version:7.x-3.9» 7.x-4.x-dev
StatusFileSize
new3.57 KB

Added patch against 7.x-4.x-dev version, for textfield, textarea and email components.

quicksketch’s picture

Status:Active» Needs review

Thanks! This looks pretty good. I'm back-pedaling on my previous statement:

I'm changing this to a feature request. I'd love to get some kind of built-in support for placeholder, though with browser support so limited at this point, I feel like we'd have to depend upon another module or JS library (possibly bundled) to provide backwards compatibility.

However I do feel like at least we should find a module that provides a shim for the placeholder attribute and make a note of it at least in the README.txt or project page. Are there any good candidates for this?

woop_light’s picture

I'm getting "Notice: Undefined index: placeholder in _webform_edit_textfield() (line 75 of /Users/ME/Sites/MYSITE/sites/all/modules/webform/components/textfield.inc)." But I cannot see why it's saying that, and everything appears to be working. Any thoughts?

sunshinee’s picture

Nate,
I haven't used this module, but it looks straightforward: http://drupal.org/project/remysharp_html5shim

I like the approach of documenting the dependency without requiring another module.

Hope this helps,
Joy

quicksketch’s picture

remysharp_html5shim only makes IE detect new HTML5 elements like <article>, <footer>, <figcaption>, etc. Surely there are projects out there that add support for the placeholder attribute too.

sunshinee’s picture

Doh! I should have read more carefully! :-/
I need this for an upcoming project, so I'll do some more research and post back with an actual solution.

technicalknockout’s picture

Just wanted to chime from the front-end developer perspective: it is a bit difficult to track down exactly where/how to add the placeholder attribute. You kind of have to get your head around drupal hooks/templates/render arrays before you can add this attribute, which keeps people busy digging through forums/documentation and generally frustrated with drupal ... but that's another issue ... It would be really cool and if for the component settings there was a little 'advanced settings' fieldset with the option to enable the html5 placeholder attribute. I think just having that default set to OFF would avoid confusion for end-users. The word 'Advanced' would be a clear sign to leave 'as is' for end-users. Maybe add a little warning/info in the description like 'Not supported by all browsers, check out such and such modules for compatibility.' could help also ... OR maybe help front-end devs know how you're supposed to do this in a theme :)

technicalknockout’s picture

Well, I got a little php snippet working for this in my theme and added a page to the documentation for themers: http://drupal.org/node/1995746

btw @quicksketch this is an awesome epic module! right up there with views :)

DriesP’s picture

I totally agree with @technicalknockout . For us front-end developers it's always a pain in the ass to figure stuff like this out with Drupal.

As for browser support, it's 2013; most browsers support this feature. And I'm sure we could provide a fallback for those who don't.

doxigo’s picture

Just add this snippet to the top of webform-form.tpl.php

foreach ($form['submitted'] as $key => $value) {
if (isset($form['submitted'][$key])) {
   $types = array('textfield', 'webform_email', 'textarea');

   if (isset($value['#type']) && in_array($value['#type'], $types)) {
     $form['submitted'][$key]['#attributes']['placeholder'] = t($value['#title']);
   }
}
}

quicksketch’s picture

StatusFileSize
new4.25 KB

This patch iterates on @sokru's patch in #13. It keeps the placeholder setting closer to the surface, in $component['extra']['placeholder'] instead of $component['extra']['attributes']['placeholder']. This makes it so that the default settings are merged in for all existing components, preventing PHP notices.

However I do feel like at least we should find a module that provides a shim for the placeholder attribute and make a note of it at least in the README.txt or project page. Are there any good candidates for this?

Unbelievably, I can't seem to find a module that provides this functionality. I think the Placeholder module would be the most appropriate candidate. There is an existing issue at #1161384: jQuery Placeholder Support. There are some excellent libraries out there these days that provide shim support for placeholders. Modernizr provides a most excellent list.

quicksketch’s picture

StatusFileSize
new4.81 KB

Revised patch that doesn't delete the attributes array line from each of the components.

quicksketch’s picture

Status:Needs review» Fixed

Committed to 7.x-4.x branch. Thanks @celstonbg and @sokru!

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

thejtate’s picture

How stable is 7.x-4.0-alpha9? I'm heavily considering using it for a project I'm working on. Would seriously like placeholder usage on this large webform.