I am trying to use HTML5 new number control using type="number" with one of my custom fields. I have problem to set the proper ID of the field so the controller will get it properly and store it.

       <apex:page id="wholePage" ... >
       <apex:form >
       <input id="..." type="number" min="0" max="99" value=" {!jobPosition.Number_Of_Seats__c}"/>

How do I create the ID for the input element or use other means to do so?


If you want to send the value from the 'native' html input field to the controller you can use the construct with a hidden apex input field, that will hold the value to send it to the controller.


public Integer myNumber { get; set; }

public PageReference saveForm()
    // Just controlling that we get the right number from the page
    System.debug('check myNumber: ' + myNumber);
    return null;


<apex:page id="wholePage">
function saveIt()
    // Getting the value from the html-input and set it to the apex-input
    //Now calling the controller function to save the inputs

    <apex:actionFunction name="saveForm" action="{!saveForm}" rerender="none"/>
    <input id="myInputNumber" type="number" min="0" max="99" value=" {!jobPosition.Number_Of_Seats__c}"/>
    <apex:commandButton value="Save" onclick="saveIt();return false;"  rerender="none"/>
    <!-- The hidden field holds the value of the input field -->
    <apex:inputHidden value="{!myNumber}" id="myHiddenNumber"/>

You can use apex:input component to get user input for a controller property or method that does not correspond to a field on a Salesforce object. Then you can assign value in side the controller.


<apex:input value="{!numDays}" type="number" id="number_of_days"  html-min="0" html-max="264"/> 
  • 2
    Awesome @Ruwantha... The attribute html-min and html-max helped me a lot in apex:input – Rajesh Kamath Apr 26 '16 at 7:34
  • 2
    @RajeshKamath don't forget html-step="1" to keep it as an Integer! – Brian Miller Mar 24 '19 at 15:27

I have managed to find a workaround (but since I am new I can only post my own answer after 8 hours :)). I am using an apex:hiddenField with the actual field and an input type="number" element to get the user input. I am using a change event on the input element and update the real "hidden" field every time it changes.

           <apex:inputHidden id="hNumOfSeats" value="{!jobPosition.Number_Of_Seats__c}"/>
           <input id="numOfSeats"  type="number"   min="0" max="99" value="{!jobPosition.Number_Of_Seats__c}" onchange="populate()" />

                  function populate(){            
                    document.getElementById('{!$Component.hNumOfSeats}').value = document.getElementById('numOfSeats').value;

I will be happy to get some more alternatives.

  • 2
    I ran into this issue and ended up using javascript to add the attribute to the field then switching it back to text before saving so it would save correctly. – Phil B Jan 29 '13 at 22:53

I needed to trigger mobile device keyboards but keep the <apex:inputText>, and I couldn't switch to html5. I ended up going with a javascript solution to switch the type="" attribute dynamically. It triggers the mobile keyboards and works well.

Here's the example for the phone field.

<apex:inputText value="{!phone}" styleclass="phone form-input" id="phone"  maxlength="25" html-mobile-input="tel" html-placeholder="Phone *" >

And this is the jquery that sets the mobile type.

    $('input[mobile-input]').each(function() {

And after validation but prior to submission I reassign the input to type=text.


Note, this is essentially the same solution Phil B suggests in his comment to another solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.