【问题标题】:HTML Input Field: Automatically display numeric input methodHTML 输入框:自动显示数字输入法
【发布时间】:2019-09-12 19:46:01
【问题描述】:

我有一个布局设置为与移动设备一起使用的网络应用程序。但是,我在表单中的大部分输入字段都是数字的。

每次我使用 Android 手机访问表单并单击其中一个输入字段以创建输入字段时,qwerty 就会出现,我必须切换到数字输入法并输入一些数字。这很不方便。

是否有 HTML 属性或某事。类似这样会让 Android(和 iPhone)默认显示数字小键盘吗?

同样,这是一个 Rails 应用程序,而不是原生智能手机应用程序。

任何帮助表示赞赏,谢谢。

【问题讨论】:

标签: android html mobile smartphone


【解决方案1】:

在 HTML 5 中,type='number' 表示字段只需要数字,而现代浏览器只允许输入数字。

<input type='number' value='123' />

编辑:

让我稍微修改一下,因为从 cmets 来看,最初的答案对大多数人来说有点肤浅。

基本上,您有三个选择:type='number'type='range'type='tel'他们都不能保证工作。结果因浏览器和键盘而异。

例如,我的 Android Opera Mobile 不要求使用数字键盘,但它会像桌面版本一样在 number 字段中添加一个旋转框。一个可与step='0.1' 配合使用的旋转框,但在当前实现中并不真正适合移动使用。

在我的 Android Firefox 5 上,number 也不会产生带有我的股票输入的数字键盘 - 这是我开始怀疑我的股票键盘是否支持数字的地方 - 但 tel 可以!并带有点!以及用于 1 2 3 的 ABC DEF GHI,它给出了它。 但是type='tel' 不是 HTML5 标准(还),并且您没有从浏览器获得验证。(2013-08 更新:tel 已成为 HTML5 标准!我不确定当...)

对于range,规范要求浏览器提供滑块而不是输入框。有的有,有的没有,我最后一次检查 iPhone Safari 是在后面的阵营中。如果您不介意不同的演示文稿,它可能是一个更好的选择。

是的,我知道。欢迎来到 HTML 5 开发。情况正在好转;我希望你不会被我们现在的风暴吓到。

【讨论】:

  • iOS 和 Opea 肯定会以不同的方式对待 number — 请参阅 diveintohtml5.org/forms.html#type-number。我对安卓一无所知。
  • @PaulDWaite Number type input 元素在我的两台 Android 设备(Android 2.2/WebKit 3.1 和 Android 2.3/WebKit 4.0)上显示数字键盘
  • 重要的是要注意“数字”类型字段的显示方式或对输入设备的影响是特定于浏览器的并且可能会发生变化(HTML5 是一个草案规范)。您绝对应该对数字字段使用“数字”类型,但浏览器有责任以最明智和最有用的方式呈现它 - 您应该相信它们会这样做。
  • 谢谢,这在 iPhone 4 上有效,但在装有 Android 2.1 的摩托罗拉 Droid 上无效。 (我猜它适用于 2.2+,正如你提到的,robertc。稍后会测试。)
  • 嗯,如果我的语言环境是德国,这不允许输入看起来像“2.3”或“2,3”的数字(至少在 Chrome 中)。指定步长 0.1 也不起作用..
【解决方案2】:

我发现结合使用 2 种方法可以实现这一点。

在大多数 Android 浏览器中,设置 type="number 在大多数情况下应该可以解决问题。但是,在 iOS 中,这将调出普通键盘,但默认为数字和特殊字符页面。我更喜欢电话拨号器类型的输入。要在 iOS 中完成此操作,请使用 pattern 属性。最终的 HTML 元素将如下所示:

<input type="number" pattern="[0-9]*" value="123" />

【讨论】:

  • 此方法适用于 type="number" AND type="text"。如果您希望输入值是字符串,请使用 type="text"。如果您希望输入值是数字,请使用 type="number"。
  • iOS 10.2 这个工作,而没有模式的评论不起作用。感谢您提供信息。
【解决方案3】:

type='tel' / HTML 增强?

如果 type='tel' 不是 html5 的一部分,那么谁来组织该属性的确切行为?

希望 tel 属性应该接受两种样式:

  1. 国家格式电话号码:

这里是芬兰的一个例子:

0401234567

  1. 国际格式电话号码:

这是来自芬兰的相同示例,但采用了正确的国际格式:

+358401234567

所以,在“tel”中,规则应该如下:

第一个字符可以是数字或特殊字符“+”。

任何其他字符必须是数字。

此格式适用于任何国家/地区。

这是另一个来自澳大利亚的例子:

+61418765432(国际格式)

0418765432(国家格式的同一个电话号码)

北美人似乎使用他们自己的格式,例如 (212) 1234567。

但是,问题在于,它与其他所有国家都不兼容。

还应注意,有效电话号码的长度可能因国家/地区而异,甚至在同一国家/地区内也可能不同。所以,“tel”不应该强制任何长度限制,至少不是任何太严格的限制。

我不知道,国际格式的最大合法电话号码长度是多少。

但是,在芬兰,国家部分将其指定为 12 位有效数字。

因此,这里是芬兰可以使用的最长有效数字的示例:

0501234567890

+358501234567890 国际格式。

在 GSM 手机中,如果您使用电话号码作为 AT 命令的一部分,您可以(在某些命令中)指定号码的类型(格式)。但如果你不这样做,

如果数字以“+”字符开头,则默认假定数字采用正确的国际格式,

否则假定为国家格式,

表示以数字开头的号码将转到手机当前所在的国家/地区,除非该号码以在手机当前所在国家/地区有效的已知国际前缀开头.

那么,在美国以外的国家/地区使用“tel”是否安全,或者它是否将号码强制为北美格式,这对于除美国以外的每个国家/地区都是错误的?

【讨论】:

  • The specification for input type="tel" 指出“电话类型不强制执行特定语法”,并鼓励您“使用 pattern 属性”如果您“需要强制执行特定格式”。所以input type="tel" 帮助用户输入电话号码,但不一定保证它会采用任何特定格式。
  • 下次你应该ask this as a new question,因为你不回答this question。如有必要,您可以在问题中添加指向其他相关问题的链接。
【解决方案4】:

如果只需要显示专用键盘,没有相应的语义、验证等,可以使用inputmode attr,例如:

<input type="text" value="+1234567890" inputmode="tel" />
<input type="text" value="123.45" inputmode="decimal" />

【讨论】:

    猜你喜欢
    • 2019-02-21
    • 2020-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-18
    • 1970-01-01
    • 2019-04-26
    • 1970-01-01
    相关资源
    最近更新 更多