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
开发者_JAVA技巧My textbox is a regular asp.net text box :
<asp:TextBox runat="server" CssClass="reference_input" Text="1234567" />
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>
精彩评论