如何使输入字段类型既是数字又是密码？ [复制]

Posted 2023-02-24

【中文标题】如何使输入字段类型既是数字又是密码？ [复制]

【英文标题】：How to make input field type both numeric and password? [duplicate]

【发布时间】：2012-02-10 22:00:46

【问题描述】：

我知道这一点：

<input type="tel">

我知道这一点：

<input type="password">

但我想同时使用两者。我希望数字键盘出现在 ios 上（特别是），但在键入后隐藏每个字符。这样的事情可能吗？

<input type="tel|password">

【问题讨论】：

这应该是你的工作：***.com/a/8334379/947898.

【参考方案1】：

您可以输入类型密码，然后在按下提交按钮时使用 javascript 验证是否仅输入了数字。 http://www.configure-all.com/javascript_form_validation.php

【讨论】：

这也是我的答案，但似乎 OP 希望启用一些通常由type="tel" 触发的 iOS 特定 UI 功能。我不认为 JS 输入验证会对此有所帮助。

回答链接不再有效。什么是更新的链接来提供帮助？

【参考方案2】：

输入框的html：

<input type="tel" name="password" id="password" value="" placeholder="Enter password"
    onfocus="changeToPassword()">

Javascript：

// change the type of the input to password
function changeToPassword() 
    setTimeout(function () 
        document.getElementById("password").setAttribute("type", "password")
    , 500);

此解决方案适用于 iphone。这是一种黑客行为。在接下来的 500 毫秒内拥有数字键盘后，您将属性更改为密码，这会欺骗手机。

【讨论】：

这不会再次起作用。有人输入信息后模糊不清重新输入信息，现在类型已经设置为密码，数字小键盘就来不及了。

【参考方案3】：

对于 iOS，您可以将输入设置为输入“密码”，并且仍然使用 HTML5 属性“模式”触发数字键盘：

<input type="password" pattern="[0-9]*" ... />

来自Apple-Documentation：

要显示数字键盘，请将模式属性的值设置为“[0-9]”或“\d”。

【讨论】：

这个答案被低估了，并且是完成所要求的更好的方法，特别是在 iOS 中。

不幸的是，它不适用于android

这在 iOS 中不起作用，至少在 iOS9 中不起作用。将类型设置为密码会使模式和输入模式属性无效。

我试过了，但也没用 pattern="[0-9]*" inputmode="numeric"