Iphone Development - How to display a numeric keyboard?

I'm working on a mobile website which is NOT a native iPhone app but rather a simple m.somedomain.com website which is developed in c# asp.net .

Objective : On clicking one of the text boxes how do I display the numeric keyboard only ?

Note : The website is NOT in HTML5 and is not part of a webview inside a Native app but rather a standalone regular website

My textbox is a regular asp.net text box :

<asp:TextBox runat="server" CssClass="reference_input" Text="1234567"  />

mopsled

EDIT: I found here that you can use

<input type="text" pattern="[0-9]*" />

to tell mobile safari to set the numeric keyboard as default, without needing to specify the telephone keyboard.

EDIT 2 (from comments below): You can also use javascript to force numeric input as so:

<input type="text" pattern="[0-9]*" onKeypress="if(event.keyCode < 48 || event.keyCode > 57){return false;}" />

If you use type="tel" instead of type="text" it will bring up a numeric keyboard.

For Salesforce (not HTML input type='number'), below java-script should make the iPad, iPhone numeric keypad defaultly appear. (This solution should work for asp.net control as well)

    <apex:page standardController="Account" >
    <head>
     <script type="text/javascript"> 
      function addLoadEvent(func)  
      { 
       var oldonload = window.onload; 
       if (typeof window.onload != 'function') 
       { 
         window.onload = func; 
       } 
       else 
       { 
         window.onload = function()  
        { 
          if (oldonload) 
           { 
             oldonload(); 
           } 
           func(); 
        } 
       } 
      }     

      addLoadEvent(function() 
      { 
       try{
          var ctl = document.getElementById('{!$Component.frm.txtNumeric}'); 
          type = document.createAttribute("type");
          type.nodeValue = "number";
          ctl.setAttributeNode(type);
         }catch(err)  
        {
        alert(err);
        }   
      }); 
     </script>
    </head>

    <body>
      <apex:form id="frm" >    
      This is a numeric input <apex:inputfield id="txtNumeric" value="{!account.name}" style="width:200px;"  /> 
      </apex:form>
    </body>

</apex:page>

来源：https://stackoverflow.com/questions/6753600/iphone-development-how-to-display-a-numeric-keyboard

标签

iphone

keyboard

numeric