什么输入字段类型会强制在聚焦时出现数字键盘移动键盘?

发布于 2024-09-12 06:12:15 字数 163 浏览 4 评论 0原文

我尝试了 但在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

心是晴朗的。 2024-09-19 06:12:16

使用 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 type

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

ゃ人海孤独症 2024-09-19 06:12:16

官方的 HTML5 处理电话号码的方式是:

<input type="tel">

当你使用 时,你可能不喜欢 Opera 带来的“奇怪的输入框”,但这确实当您想要要求访问者输入数值时,是适当类型的输入区域。

The official HTML5 way to handle phone numbers is:

<input type="tel">

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.

小鸟爱天空丶 2024-09-19 06:12:16

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.

梦断已成空 2024-09-19 06:12:16

该帖子现已无效。现在所有智能手机都支持 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.

千纸鹤带着心事 2024-09-19 06:12:16

您可以使用 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 is inputmode="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

国际总奸 2024-09-19 06:12:16

这将在移动设备上运行,并阻止在桌面版本的页面中输入字母“e”(以及所有其他字母)。 type="number" 本身通常仍然允许根据规范使用“e”:

<input pattern="[0-9]*" type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');">

如果您在上面使用 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:

<input pattern="[0-9]*" type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');">

If you use type="number" in the above, then if you type "123" then "e" the oninput JS will replace all contents of the box. Just use type="text" if you really just want integer values.

又怨 2024-09-19 06:12:16

尝试
或者
<输入类型=“电话”模式=“/d*”>
如果您使用 Android,这将会有所帮助。

Try <input type="number" pattern="/d*">
OR
<input type="tel" pattern="/d*">
This will help if you working with Android.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文