输入类型=“密码”使用移动设备上的数字键盘

时间:2013-10-01 22:10:47

标签: html mobile input passwords numbers

在我为移动设备设计的网站上,我有一个用于PIN码的输入字段。我希望文本在输入时隐藏,我希望当移动设备上的用户想要输入PIN时,会弹出数字键盘。 Type =“Number”时会弹出数字键盘,但当Type =“Password”时不会弹出,而我不能(或者不知道如何)设置Type =“Number and Password”。

任何想法?

提前致谢!

7 个答案:

答案 0 :(得分:33)

最后,我找到了答案here

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

(仅适用于基于WebKit的浏览器)

答案 1 :(得分:29)

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

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

你可以将它用于将来 - 尽管当前的HTML 5.1不允许它用于type=password,原因有些奇怪。

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

答案 2 :(得分:4)

使用“模式”和“输入模式”的简单方法无法在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模拟器的此图片:

enter image description here

答案 3 :(得分:1)

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

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

然后,如果您犯了一个错误。您可以清除输入并再次设置type="number"

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

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

答案 4 :(得分:0)

或者您可以使用javascript和CSS创建自己的键盘,当用户键入数字时,可以显示*并将值存储在javascript变量中。 我喜欢这样做,它使用户登录非常顺利和轻松......首先移动

答案 5 :(得分:0)

使用type =“ tel”和CSS掩码“ disc” 对我有用,但是密码管理器(如LastPass)需要输入type =“ password”才能开始工作。

所以,我的想法是根据设备更改输入类型。我使用Browser Detection by hisorange (for Laravel):对于台式机使用“ password”类型,对于移动设备使用“ tel”类型。

CSS:

tarting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[13/Apr/2019 11:33:59] "GET / HTTP/1.1" 200 17234
[13/Apr/2019 11:34:02] "GET /login/ HTTP/1.1" 200 1382
True
Internal Server Error: /login_/
Traceback (most recent call last):
  File "F:\softs\Anaconda3\lib\site-packages\django\core\handlers\exception.py", line 34, in inner
    response = get_response(request)
  File "F:\softs\Anaconda3\lib\site-packages\django\core\handlers\base.py", line 126, in _get_response
    response = self.process_exception_by_middleware(e, request)
  File "F:\softs\Anaconda3\lib\site-packages\django\core\handlers\base.py", line 124, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "F:\projects\PycharmProjects\roottic\root\views.py", line 61, in login_
    a = users()
  File "F:\softs\Anaconda3\lib\site-packages\django\db\models\base.py", line 459, in __init__
    val = field.get_default()
  File "F:\softs\Anaconda3\lib\site-packages\django\db\models\fields\__init__.py", line 798, in get_default
    return self._get_default()
TypeError: Required argument 'offset' (pos 1) not found
[13/Apr/2019 11:34:04] "POST /login_/ HTTP/1.1" 500 75786

控制器:

.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';
 }

答案 6 :(得分:0)

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