在我为移动设备设计的网站上,我有一个用于PIN码的输入字段。我希望文本在输入时隐藏,我希望当移动设备上的用户想要输入PIN时,会弹出数字键盘。当Type =“Number”时,数字键盘会弹出,而当Type =“Password”时,数字键盘不会弹出,而我不能(或者不知道如何)设置Type =“Number and Password”。
有任何想法吗?
提前致谢!
使用“模式”和“输入模式”的简单方法在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模拟器的此图片:
为什么不用type="number"
设置输入并使用jQuery
在输入中的keydown之后更改类型。
$("input").keydown(function () {
$(this).prop('type', 'password');
});
如果你犯了错误。您可以清除输入并再次设置type="number"
。
$("input").click(function () {
$(this).val('');
$(this).prop('type', 'number');
});
这是我的第一个答案,我希望我能帮到你。
或者您可以使用javascript和CSS创建自己的键盘,当用户键入数字时,bisplay *并将值存储在javascript变量中。我喜欢它,它使用户登录非常顺利和轻松...移动第一
使用type =“tel”和css掩码“disc”对我有用,但密码管理器(如LastPass)需要输入type =“password”才能开始工作。 所以,我的想法是改变输入类型取决于设备。我使用Browser Detection by hisorange (for Laravel):Desktop的“password”类型和Mobile divices的“tel”类型。 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">