7

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"  />
Murtaza Mandvi
  • 10,708
  • 23
  • 74
  • 109
  • 1
    Related, though possibly outdated: [iPhone UIWebview: How to force a numeric keyboard? Is it possible?](http://stackoverflow.com/questions/773843/iphone-uiwebview-how-to-force-a-numeric-keyboard-is-it-possible) – PengOne Jul 19 '11 at 20:32

3 Answers3

13

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;}" />

Community
  • 1
  • 1
mopsled
  • 8,445
  • 1
  • 38
  • 40
  • 2
    "\d*" is also possible as an alternative. – macbirdie Jul 19 '11 at 20:51
  • Thanks ! This works perfectly, although I see the ABC sign on the keyboard to switch to Alpha again, is there a way to disable or remove that too so that the user has no option but to enter numeric only ? – Murtaza Mandvi Jul 20 '11 at 15:21
  • The best way I can think of to do this is to use javascript - try `` This could still possibly be overridden if the user has javascript disabled, but it's more difficult to accidentally put alpha characters there. I found that solution [here](http://www.phpbuilder.com/board/showthread.php?t=10281032). – mopsled Jul 20 '11 at 15:28
  • @Murtaza Whoops! That's what I get for copying and pasting code. Try just this, and let me know if it works: `` – mopsled Jul 20 '11 at 15:34
  • I know I posted this question specifically for iPhone - but is there a similar condition that applies to Android ? I tested this on Android and that is not working ...? – Murtaza Mandvi Jul 20 '11 at 16:26
  • Does `` do the trick? This should be supported on Android 2.2 and on. – mopsled Jul 20 '11 at 16:44
  • What version of android phone/emulator are you testing on? – mopsled Jul 20 '11 at 17:23
  • Actually it works - my bad, it did not work with asp.net textbox but when I converted it to a HTML textbox it works :) Thanks ! – Murtaza Mandvi Jul 20 '11 at 17:58
4

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

Nick
  • 41
  • 1
  • I read that this functionality has been removed in the previous version of IOS ? – Murtaza Mandvi Jul 19 '11 at 20:41
  • They're available _since_ iOS 3.1. It's in the [docs](http://developer.apple.com/library/ios/#documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html) of course. – macbirdie Jul 19 '11 at 20:49
0

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>
HelpExchange
  • 11