HTML5 input type number for decimals

Question

I have created a SalesForce1 app for my organizations.

It is working fine and I used internet to help me go through all the customization.

I would like the inputs to be managed by HTML5 to make the users' life easier.

I was able to display a date selector for date fields on smartphones/tablets but I cant do the same for decimal fields (currency).

For the date

apex:inputField type="date" value="{!s.Date_6__c}"/

=> Working

For the decimal

apex:inputField type="number" value="{!s.Amount_6__c}"

=> Error: Input type 'number' does not support Decimal data type. Try settng type to 'text'

I saw workarounds based on hidden fields but i'd rather have a real solution if possible..

Answer 1

<apex:page standardController="Object" doctype="html-5.0">
<apex:input type="Number" html-step="any" Value="yourValue"/>
</apex:page>

Be sure to specify doctype="html-5.0" and the html-step="any" in order to have decimals in the html number input.

Answer 2

I'm a bit late to the party here, but one solution (that I thought was no longer necessary due to the HTML5 features that you are using - but perhaps is still useful), is to do a javascript switcheroo on field focus.

Basically you change to type 'tel' on focus and put back to 'text' when you lose focus. This way you can have a inputText and still have a numpad show up.

Example:

function changeToText(){
    var currSelected = document.getElementsByClassName("numpad");
    for (var i=0; i<currSelected.length;i++) {
        currSelected[i].type = 'text';
    }
};
function changeToTel(input){
    input.type = 'tel';
};

<apex:inputText styleClass="numpad" onfocus="changeToTel(this)"  value="{!object.field__c}" />

Call changeToText() on save - call an intermediary javascript function that calls changeToText then your actionFunction.

Answer 3

Maybe something like this

<apex:inputText value="{0, number,###,###,##0.00}">
        <apex:param value="{!decimalValueHere}" />
   </apex:inputText>

or if you want an Integer number

  <apex:inputText value="{0, number,###,###,##0}">
        <apex:param value="{!decimalValueHere}" />
   </apex:inputText>