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.

Attribution to: Phil B

Possible Suggestion/Solution #1

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:)

Attribution to: T. Rossi

Possible Suggestion/Solution #2

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.

Attribution to: Shane McLaughlin

Possible Suggestion/Solution #3

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

Attribution to: greenstork

Possible Suggestion/Solution #4

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

Attribution to: Rao

Possible Suggestion/Solution #5

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>

Attribution to: eyescream

Possible Suggestion/Solution #6

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

Attribution to: Caspar Harmer
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/4830

Search form

You are here

can inputfields in a VF page with doctype html5 support types?