使 Input Type="Password" 在移动设备上使用数字键盘

Posted 2023-02-24

【中文标题】使 Input Type="Password" 在移动设备上使用数字键盘

【英文标题】：Make Input Type="Password" Use Number Pad on Mobile Devices

【发布时间】：2013-10-08 05:49:33

【问题描述】：

在我为移动设备设计的网站上，我有一个用于 PIN 码的输入字段。我希望文本在输入时被隐藏，并且我希望在移动设备上的用户想要输入 PIN 时弹出数字键盘。数字键盘在 Type="Number" 时弹出，但在 Type="Password" 时不会弹出，我不能（或不知道如何）设置 Type="Number and Password"。

有什么想法吗？

提前致谢！

【问题讨论】：

您可能需要伪造密码字段并自己在该字段中插入星号。

【参考方案1】：

某些浏览器 (ios) 将 [0-9]* 的特定 pattern 属性值识别为触发数字键盘。

HTML 5.1 草案包含inputmode 属性，旨在解决输入模式（如键盘）选择的特定问题，但尚未实施。

不过，您可以在未来使用它——尽管出于某种奇怪的原因，当前的 html 5.1 不允许 type=password 使用它。

<input type="password" pattern="[0-9]*" inputmode="numeric">

【讨论】：

我在 iOS 8.2 上试过这个，我得到了常规的字母键盘。 type="text" 时完全按预期工作；只有当我将其更改为 type="password" 时，我才能获得字母键盘。

使用 Cordova，构建 target=android 这不起作用。仍然显示数字键盘

如果您想测试这些答案中提出的不同方法，请在您的设备上查看cdpn.io/e/ygoNbJ

【参考方案2】：

终于找到了答案here：

input[type=number] 
    -webkit-text-security: disc;

（仅适用于基于 WebKit 的浏览器）

【讨论】：

这对我有用（Safari，iOS 9.3.2）。不幸的是，输入的数字出现在屏幕键盘顶部自动建议区域的最左侧框中，因此它们仍然在屏幕上可见（尽管在实际输入字段本身中被屏蔽）。

继我之前的评论之后：似乎将输入字段类型从 number 更改为 tel 会阻止自动建议区域显示任何内容。结合-webkit-text-security: disc;，这样可以确保密码根本不会显示在屏幕上。

<input type="number" pattern="[0-9]*" inputmode="numeric" min="1111" max="9999" style="-webkit-text-security: disc;" autofocus />

请注意，这种方法可能不安全，因为可以在检查器中看到输入值。此外，旁白会大声读出数字。

【参考方案3】：

像使用“模式”和“输入模式”这样的简单方法在 Android 和 IOS 中都不起作用，因此我使用 CSS 和 javascript 实现了以下解决方法。

https://jsfiddle.net/tarikelmallah/1ou62xub/

HTML

 <div>
  <input type="password" class="form-control ng-valid-minlength ng-valid-pattern ng-dirty ng-valid ng-valid-required" id="pass" name="pass" data-ng-minlength="4" maxlength="4"  tabindex="-1">
  <input type="tel" class="form-control ng-valid-minlength ng-dirty ng-valid ng-valid-required" id="passReal" name="passReal" required="" data-ng-minlength="4" maxlength="4" data-display-error-onblur="" data-number-mask="telephone"
         tabindex="5">
</div>

JavaScript

$().ready(function()
var xTriggered = 0;
$( "#passReal" ).keyup(function( event ) 
  $('#pass').val($('#passReal').val());
  console.log( event );
);
$( "#pass" ).focus(function() 
  $('#passReal').focus();
);

  );

风格：

input#passReal
  width:1px;
  height:10px;

input#pass 
    position: absolute;
left:0px;

来自 Android 模拟器的这张图片：

【参考方案4】：

为什么不使用type="number" 设置输入并在输入中按下键后使用jQuery 更改类型。

$("input").keydown(function () 
    $(this).prop('type', 'password');
);

如果你犯了错误。您可以清除输入并再次设置type="number"。

$("input").click(function () 
    $(this).val('');
    $(this).prop('type', 'number');
);

这是我的第一个答案，希望对您有所帮助。

【参考方案5】：

使用 type="tel" 和 css mask "disc" 对我有用，但密码管理器（如 LastPass）需要输入 type="password" 才能开始工作。 所以，我的想法是改变输入类型取决于设备。我使用Browser Detection by hisorange (for Laravel)：“密码”类型用于桌面，“电话”类型用于移动设备。 CSS：

.password-mask 
        -webkit-text-security: disc;
        -moz-webkit-text-security: disc;
        -moz-text-security: disc;
    

控制器：

 if (Browser ::isMobile() || Browser ::isTablet()) 
    $device = 'm';
  else 
    $device = 'd';
 

刀片：

<input type="$device=='d' ? 'password' :'tel'" 
pattern="[0-9]*" 
class="form-control password-mask $errors->has('password') ? 'invalid' :''"
autocomplete="current-password" id="password" name="password">

【参考方案6】：

type = "tel"
.class 
    -webkit-text-security: disc;
    -moz-webkit-text-security: disc;
    -moz-text-security: disc;

【讨论】：

仅代码的答案在本网站上通常不受欢迎。您能否编辑您的答案以包含一些 cmets 或对您的代码的解释？解释应该回答这样的问题：它有什么作用？它是如何做到的？它去哪儿了？它如何解决OP的问题？请参阅：How to anwser。谢谢！

【参考方案7】：

或者您可以使用 javascript 和 CSS 创建自己的键盘，当用户输入数字时，bisplay * 并将值存储在 javascript 变量中。 就像我做的那样，它使用户登录变得非常流畅和容易……移动优先