什么输入字段类型会强制在聚焦时出现数字键盘移动键盘?
我尝试了 但在 Opera 上输出了一个奇怪的输入框以及一个“向上和向下”处理程序。我期望的是一个常规的文本字段,一旦您关注它,就会提示数字键盘而不是字母。这可能吗?
ps我并不是想验证。这将是一个很好的用户体验,仅此而已。
I tried the <input type="number" />
but on Opera that outputs a strange input box coupled with an "up and down" handler. What I expected was a regular text field that once you focus on it prompts the number keyboard instead of the alphabets. Is that even possible?
p.s. I'm not trying to validate. It would be a nice user experience, that's all.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
使用
pattern="[0-9]*"
数字输入示例:
< /code>
电话输入示例:
< ;input type="tel"pattern="[0-9]*"/>
注意:不支持
type="tel"
的浏览器将默认为文本类型注意: 使用
type="number"
可能会导致某些浏览器和信用卡、邮政编码和电话输入的用户体验出现问题,用户可能需要在输出中输入标点符号或逗号。参考文献:
Use
pattern="[0-9]*"
Example number input:
<input type="number" pattern="[0-9]*" />
Example phone input:
<input type="tel" pattern="[0-9]*" />
Note: Browsers that do not support
type="tel"
will default to a text typeBeware: Using
type="number"
can cause problems with some browsers and user experience for credit card, postal code, and telephone inputs where a user might need to enter punctuation or a comma being in the output.References:
官方的 HTML5 处理电话号码的方式是:
当你使用
时,你可能不喜欢 Opera 带来的“奇怪的输入框”,但这确实当您想要要求访问者输入数值时,是适当类型的输入区域。
The official HTML5 way to handle phone numbers is:
You may not have liked the "strange input box" you got with Opera when you used
<input type="number" />
, but that really is the appropriate type of input area when you want to require visitors to enter a numeric value.type="number" 是 HTML5,
许多手机不支持 HTML5。对于呼叫链接,您可以使用 type="tel" 或
特别A
。您应该查看CSS WAP 扩展(第 56 页)。
编辑 10/2015:
大多数(如果不是全部)智能手机都支持 HTML5 和 CSS3,因此
type="number"
是最好的方法。type="number" is HTML5 and
many phones do not support HTML5.For call link you can use type="tel" or
<A href="wtai://wp/mc;600112233">Special A</A>
.You should look at CSS WAP extensions (page 56) too.
EDIT 10/2015:
Most if not ALL smart phones support HTML5 and CSS3, so
type="number"
is the best way.该帖子现已无效。现在所有智能手机都支持 HTML5 和 CSS3,因此添加 type="number" 实际上会提示弹出数字键盘。我刚刚在 2 个不同的 Android 版本和 iPhone 上检查过。因此,未来没有人会尝试使用 WAP 来代替正确的 HTML5 格式。
This post is now invalid. All smartphones support HTML5 and CSS3 now, so adding type="number" does in fact prompt the number pad to pop-up. I just checked it on 2 different Android versions, and an iPhone. Just so no one in the future tries WAP instead of the correct HTML5 format.
您可以使用 HTML 属性
inputmode
控制输入焦点上出现的键盘样式,而与输入类型无关。您可能正在寻找的是inputmode="numeric"
,它显示一个包含 0-9 的数字键盘。还有其他选项,例如带有 # 和 * 的数字键盘。请参阅下面链接的文档。这非常适合
type="number"
不起作用的用例,例如用破折号格式化的数字。https://developer.mozilla.org/en-US/docs /Web/HTML/Global_attributes/inputmode
You can control the style of keyboard that comes up on input focus, independently of the input type, with the HTML attribute
inputmode
. What you're probably looking for isinputmode="numeric"
, which shows a number pad with 0-9. There are other options, such as a number pad with # and *. See the docs linked below.This is ideal for uses cases where
type="number"
would not work, such as numbers formatted with dashes.https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
这将在移动设备上运行,并阻止在桌面版本的页面中输入字母“e”(以及所有其他字母)。
type="number"
本身通常仍然允许根据规范使用“e”:如果您在上面使用
type="number"
,那么如果您输入“123”,则"e"oninput
JS 将替换框中的所有内容。如果您确实只想要整数值,只需使用 type="text" 即可。This will work on mobile and will prevent the letter "e" (along with all other letters) from being allowed to be typed in in the desktop version of your page.
type="number"
by itself still normally allows "e" per spec:If you use
type="number"
in the above, then if you type "123" then "e" theoninput
JS will replace all contents of the box. Just use type="text" if you really just want integer values.尝试
或者
<输入类型=“电话”模式=“/d*”>
如果您使用 Android,这将会有所帮助。
Try
<input type="number" pattern="/d*">
OR
<input type="tel" pattern="/d*">
This will help if you working with Android.