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

Question

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

有任何想法吗？

提前致谢！

Answer 1

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

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

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

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

Answer 2

最后，我在这里找到了答案：

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

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

Answer 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 模拟器的这张图片：

Answer 4

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

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

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

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

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

Answer 5

使用 type="tel" 和 css mask "disc"对我有用，但密码管理器（如 LastPass）需要输入 type="password" 才能开始工作。

所以，我的想法是改变输入类型取决于设备。我使用了 hisorange 的浏览器检测（对于 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">

Answer 6

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

Answer 7

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