10

I have a VF page with the doc type set to html5

<apex:page docType="html-5.0" sidebar="false" standardStylesheets="false" showHeader="false" standardController="MyObject__c" >

When I try to set the type on the inputField it appears its not supported (error trying to save, and attribute not shown in the SF docs). I'd like to set the type to 'email' so the correct keypad will come up on mobile devices. As described here: http://www.html5tutorial.info/html5-contact.php

Has anyone achieved this or know of any way to do so?

I'd rather not have to write javascript to inject the attribute into the rendered HTML but I guess thats an option.

Improve this question

6 Answers 6

Reset to default
6

apex:inputfield supports the html5 attributes starting in winter 14

example here. https://gist.github.com/tyoshikawa1106/6325988

and they also made a new apex:input that binds to the controller for non-sobject fields.

Improve this answer
1
  • Yep, was pretty excited when I heard that.
    – Phil B
    Sep 10, 2013 at 19:43
3

Have you tried using the "html pass-through"? If you need a special attribute foo="bar" outside of standard html specification all you have to do is to prefix it with html- and it will be carried over to the generated code.

I mean, the example in the docs literally talks about html 5...

<apex:page showHeader="false" standardStylesheets="false" doctype="html-5.0">
    <apex:outputPanel layout="block" html-data-role="panel" html-data-id="menu">
        <apex:insert name="menu"/>    
    </apex:outputPanel>

    <apex:outputPanel layout="block" html-data-role="panel" html-data-id="main">
        <apex:insert name="main"/>    
    </apex:outputPanel>
</apex:page>

renders

<!DOCTYPE HTML>
<html>
<head> ... </head>
<div id="..." data-id="menu" data-role="panel">
    <!-- contents of menu -->
</div>

<div id="..." data-id="main" data-role="panel">
    <!-- contents of main -->
</div>
</html>
Improve this answer
1
  • I actually didn't know about this but it looks like its not supported on inputText/inputField, only outputPanels. Gave it a shot just to try and no luck. good to know though!
    – Phil B
    Nov 28, 2012 at 3:28
3

I wrote a blog post about using JavaScript to inject the required attribute a couple of months ago.

Note, to submit data back to salesforce you need to remove the attribute you added via JavaScript before submitting. (that was my experience anyway).

Here's the blog entry (sorry about the simplified approach): rewriting the input type element using javascript

Improve this answer
3
  • Cool, thanks. I learned that you can't change the type attribute via jquery attr() but the regular javascript way worked!
    – Phil B
    Dec 11, 2012 at 16:34
  • Glad it helped!
    – Caspar Harmer
    Dec 12, 2012 at 0:53
  • This is now an old technique - the answer below is now the way to go.
    – Caspar Harmer
    Jul 30, 2014 at 1:41
1

Try using the same HTML Tags. Simply do this:

I was able to verify that the inputs were being rendered as email and phone by double clicking on the field names

<apex:page docType="html-5.0" sidebar="false" standardStylesheets="false" showHeader="false" standardController="Account" >
<input id="email" type="email"/>
<input id="website" type="url"/>
<input id="phone" type="tel" />
</apex:page>

enter image description here

Improve this answer
3
  • Hm, yeah I guess there's no harm to mixing in regular inputs with inputFields.
    – Phil B
    Nov 27, 2012 at 21:07
  • Inputfields just make life so much easier for checkboxes, picklists, etc that I'd like to continue to leverage them for those fields and just use regular inputs for the fields I need them for (email, telephone). Do you see any downside/risks to doing that?
    – Phil B
    Nov 27, 2012 at 21:09
  • If u mean to say that you want to use <apex:inputfield> and <input> together in the form I think there is no big harm mixing both.
    – Rao
    Nov 27, 2012 at 21:12
0

I have a very simple answer which work for most of my use cases, e.g. placeholder attribute. It comes late.. but it's quite neat, so if winter 14 will have some strange behavior on certain attributes, this will do.

It relies on jQuery injecting the html5 attribute into the html element, so you'll need 1 line of jquery for each attribute you want to set.

 <script>
     $("input[id$='myId']").attr("placeholder","Placeholder text");
 </script>
  ...
 <apex:inputText value="{!someVariable}" id="myId"/>

You just have to notice the jquery selector: it looks for the input element with id ending in 'myId', as you know salesforce like to attach prefixes before your id. Of course.. you may as well use a class if that applies to more than one input text:)

Improve this answer
0

The Winter '14 Salesforce release will support custom attributes on Visualforce, along with some handy new components that will make HTML5 development easier. Check out the release notes for more information:

https://help.salesforce.com/help/pdfs/en/salesforce_winter14_release_notes.pdf

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .