Iphone Development - 如何显示数字键盘？答案

【问题标题】：Iphone Development - How to display a numeric keyboard?Iphone Development - 如何显示数字键盘？
【发布时间】：2011-10-08 21:02:48
【问题描述】：

我正在开发一个移动网站，它不是一个原生 iPhone 应用程序，而是一个用 c# asp.net 开发的简单 m.somedomain.com 网站。

目标：单击其中一个文本框时，如何仅显示数字键盘？

注意：该网站不是 HTML5 格式，也不是本机应用程序内 web 视图的一部分，而是一个独立的常规网站

我的文本框是一个普通的 asp.net 文本框：

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

【问题讨论】：

相关，但可能已过时：iPhone UIWebview: How to force a numeric keyboard? Is it possible?

标签： iphone keyboard numeric

【解决方案1】：

编辑：我找到了您可以使用的here

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

告诉移动 safari 将数字键盘设置为默认值，而不需要指定电话键盘。

EDIT 2（来自下面的 cmets）：您也可以使用 javascript 来强制输入数字：

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

【讨论】：

"\d*" 也可以作为替代方案。
谢谢！这很好用，虽然我看到键盘上的 ABC 符号再次切换到 Alpha，但有没有办法禁用或删除它，以便用户别无选择，只能输入数字？
我能想到的最好的方法是使用 javascript - 尝试<input type="text" pattern="[0-9]*" onKeypress="if(!isNS4){if(event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;}else{if(event.which < 45 || event.which > 57) returnfalse;}" /> 如果用户禁用了 javascript，这仍然可能被覆盖，但不小心将字母字符放在那里更困难.我找到了解决方案here。
@Murtaza 哎呀！这就是我复制和粘贴代码所得到的。试试这个，让我知道它是否有效：<input type="text" pattern="[0-9]*" onKeypress="if(event.keyCode < 48 || event.keyCode > 57){return false;}" />
我知道我专门为 iPhone 发布了这个问题 - 但是否有适用于 Android 的类似条件？我在 Android 上对此进行了测试，但它不起作用......？

【解决方案2】：

如果你使用 type="tel" 而不是 type="text" 它会弹出一个数字键盘。

【讨论】：

我看到之前版本的IOS已经去掉了这个功能？
它们从 iOS 3.1 开始可用。当然是在docs。

【解决方案3】：

对于 Salesforce（不是 HTML input type='number'），下面的 java-script 应该使 iPad、iPhone 数字键盘默认出现。（此解决方案也适用于 asp.net 控件）

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

【讨论】：