2013-01-21 222 views
44

根据Apple's documentation当我设置一个类型为number的输入元素时,我应该得到一个数字键盘。<input type =“number”/>没有在iOS上显示数字键盘

<input type="number"/> 

number: 用于指定号码的文本字段。在iOS 3.1及更高版本中提供数字键盘键盘。

看起来该死的几乎不可能搞砸了。但是,当我在我的iPhone或模拟器(均为iOS6)上查看这个简单的小提琴时,数字小键盘不会出现,而是我会得到标准的字母键盘。

http://jsfiddle.net/Cy4aC/3/

在地球上我能怎么可能在这里搞砸?

enter image description here

+0

仅供参考,我的基于Android的手机也是如此。谢谢你问这个。 +1 –

回答

84

你需要指定模式:

<input type="number" pattern="\d*"/> 

作为number很可能会成为负数或浮点,所以-,应该在键盘中可用,除非您指定仅数字模式。

enter image description here

+1

是的!谢谢。苹果文档似乎不准确。它说关于'type =“number”'_“指定\ d *或[0-9] *的输入类型等同于使用这种类型。”_似乎并不全是真的。它称它是错误的东西(类型!=模式),并声称它们是多余的,当两者都需要描述的效果...哦苹果:( –

+0

它也可以在Android上工作吗?谢谢 – user1269586

+2

这不工作在ipad – Priya

1

我不知道这是否是你想要什么,但输入型=“电话”会给你的“电话号码垫”。

+0

这对手机键盘很有用,但它也可以让其他疯狂像'*','#',';'和','。我只是想要数字。并根据文档,'type =“number”'应该工作... –

+0

那么,你在上面的问题是什么苹果电话号码键盘... – pIkEL

+0

_This_是我想要的:http:// f .cl.ly/items/0P0s1b3A1S3s170F1g2Q/Screen%20Shot%202013-01-21%20at%201.55.31%20 PM.png没有手机的东西,只是数字。 –

1

根据我的经验,这是跨浏览器很不一致。 iOS在我的使用案例中正确支持这一点之间来回移动。我通常只想让默认显示的键盘是数字键盘。最后一次检查时,正确使用input type =“number”会出现数字键盘,但“size”属性会被忽略,这会严重影响我的移动格式。我向所有输入添加了一个属性,我希望数字键盘默认使用该属性,并且当浏览器检测为正常工作时,我使用jQuery更改任何属性(即type =“number”)。这样我就不必重新开始并更新各个输入,并允许我仅将其应用于支持的浏览器中。

这将是可爱的,如果主要的移动操作系统的输入类型除了“默认键盘”的属性。如果用户输入地址或邮政编码怎么办?通常那些以数字开头,所以默认显示数字键盘,但允许任何文本,是有帮助的。

就验证而言,我不能依赖浏览器来支持特定输入类型的验证,所以我使用javascript和服务器端验证。

-1

问候。我知道这个问题很老,但我觉得这是一个非常受追捧的解决方案,并决定发表一个答案。

这里有一个解决方案我创建地址iPad的键盘以及相当多的东西。

此外,这种方法不要求您使用类型号码的输入,这在我的拙见中是非常丑陋的。

下面,您可能会发现一个工作版本。

思考苹果iPad键盘按键...

我不得不创建一个按键事件处理程序来捕捉和抑制iPad上的按键,似乎没有由keyDown事件处理或不明确???!

// Bind keydown event to all input type=text in form. 
 
$("form input[type=text]").keydown(function (e) { 
 

 
// Reference to keyCodes... 
 
var key = e.which || e.keyCode; 
 
// Reference to shiftKey... 
 
var shift_key = e.shiftKey; 
 
// Reference to ctrlKey... 
 
var ctrl_key = e.ctrlKey; 
 
// Reference to altKey... 
 
var alt_key = e.altKey; 
 

 

 
// When user presses the shiftKey... 
 
if(e.shiftKey) { 
 

 
//...supress its click and whatever key follows after it. 
 
console.log(e.shiftKey + ' and ' + key + ' supressed.'); 
 

 
// Deny 
 
return false; 
 

 
// ONLY Allow Numbers, Numberpad, Backspace & Tab 
 
} else if ((key >= 48 && key <=57) || (key >= 96 && key <=105) || (key >= 8 && key <=9)) { 
 

 
// Allow 
 
return true; 
 

 
} else { 
 

 
// Deny every other key and/or shift + key combination NOT explicitly declared. 
 
return false; 
 
} 
 

 
}); 
 

 

 
// KeyPresss to handle remaining iPAD keyboard keys! 
 
// These keys don't seem to be handled by the keyDown event or are ambiguous???! 
 
// Bind keypress event to all input type=text in form. 
 
$("form input[type=text]").keypress(function (e) { 
 

 
// Reference to keyCodes... 
 
var key = e.which || e.keyCode; 
 
// Reference to shiftKey... 
 
var shift_key = e.shiftKey; 
 
// Reference to ctrlKey... 
 
var ctrl_key = e.ctrlKey; 
 
// Reference to altKey... 
 
var alt_key = e.altKey; 
 

 
switch (key) { 
 

 
// Character ->^
 
case 94: 
 
return false; 
 

 
// Character -> # 
 
case 35: 
 
return false; 
 

 
// Character -> $ 
 
case 36: 
 
return false; 
 

 
// Character -> @ 
 
case 64: 
 
return false; 
 

 
// Character -> & 
 
case 38: 
 
return false; 
 

 
// Character -> * 
 
case 42: 
 
return false; 
 

 
// Character -> (
 
case 40: 
 
return false; 
 

 
// Character ->) 
 
case 41: 
 
return false; 
 

 
// Character -> % 
 
case 37: 
 
return false; 
 

 
// Character -> ! 
 
case 33: 
 
return false; 
 

 
} 
 

 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form action=""> 
 

 
<label for="text1">Numbers, Numberpad, Backspace & Tab ONLY:</label> 
 
<input id="text1" type="text" placeholder="0" min="0" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4"> 
 

 
</form>

0

阅读并尝试了很多的想法之后,没有什么,我发现曾准确地显示键盘与数字只及昏迷或点。如果有

var previousValue = localStorage.getItem('myInputId'); 
if (input.getAttribute('type') === "number" && input.validity && input.validity.badInput) { 
    input.value = previousValue || ""; 
} 
localStorage.setItem('myInputId', input.value); 

这可以防止用户通过与前一个替换值写错误的字符:

我只使用<input type="number">onkeyup处理该输入,我做这样的事情结束有效性的错误(我dont't知道这是一款iOS对象或标准)

提防余did't测试此代码段,因为我有更复杂的东西围绕在我身边,但我希望你能明白我的意思

有了这个解决方案:

  • 在iOS上:用户有一个完整的经典键盘,但默认情况下,在数字打开,不能写错字。
  • 在Android上,数字键盘非常完美。
  • 在未来,我们可以希望iOS会触发数字的好键盘,并且JavaScript部分将永远不会被调用。
相关问题