Html 使 Input Type="Password" 在移动设备上使用数字键盘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19126856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Input Type="Password" Use Number Pad on Mobile Devices
提问by JT Nolan
On my site designed for mobile devices I have an input field that is used for PIN numbers. I want the text to be hidden as it is entered and I want the number pad to pop up when the user on the mobile device wants to enter the PIN. The number pad pops up when Type="Number" but not when Type="Password" and I can't (Or don't know how to) set Type="Number and Password".
在我为移动设备设计的网站上，我有一个用于输入 PIN 码的输入字段。我希望文本在输入时隐藏，我希望在移动设备上的用户想要输入 PIN 时弹出数字键盘。当 Type="Number" 而不是 Type="Password" 并且我不能（或者不知道如何）设置 Type="Number and Password" 时，数字键盘会弹出。
Any Ideas?
有任何想法吗？
Thanks in advance!
提前致谢！
采纳答案by Jukka K. Korpela
Some browsers (iOS) recognize the specific patternattribute value of [0-9]*as triggering numeric keypad.
某些浏览器 (iOS) 将 的特定pattern属性值识别[0-9]*为触发数字键盘。
The HTML 5.1draft contains the inputmodeattribute, which has been designed to address the specific issue of input mode (like key pad) selection, but it has not been implemented yet.
在HTML 5.1草案中包含的inputmode属性，它被设计来解决输入模式（如键盘）选择的具体问题，但尚未实施。
You could use it for the future, though – even though the current HTML 5.1 does not allow it for type=password, for some odd reason.
不过，您可以在将来使用它——即使当前的 HTML 5.1 不允许type=password，出于某种奇怪的原因。
<input type="password" pattern="[0-9]*" inputmode="numeric">
回答by Mati Tucci
回答by Tarek El-Mallah
The straightforward ways like using "pattern" and "inputmode" not working in Android nor IOS, so I emplemented the below workaround using CSS, and JavaScript.
像使用“模式”和“输入模式”这样的简单方法在 Android 和 IOS 中都不起作用，所以我使用 CSS 和 JavaScript 实现了以下解决方法。
https://jsfiddle.net/tarikelmallah/1ou62xub/
https://jsfiddle.net/tarikelmallah/1ou62xub/
HTML
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
JavaScript
$().ready(function(){
var xTriggered = 0;
$( "#passReal" ).keyup(function( event ) {
$('#pass').val($('#passReal').val());
console.log( event );
});
$( "#pass" ).focus(function() {
$('#passReal').focus();
});
});
Style:
风格：
input#passReal{
width:1px;
height:10px;
}
input#pass {
position: absolute;
left:0px;
}
this image from Android emulator:
此图像来自 Android 模拟器：
回答by damalga
Why don't you set the input with type="number"and use jQueryto change the type after a keydown in the input.
为什么不在输入中设置输入键type="number"并使用它jQuery来更改类型。
$("input").keydown(function () {
$(this).prop('type', 'password');
});
Then if you have made a mistake. You could clear the input and set once again the type="number".
那么如果你犯了错误。您可以清除输入并再次设置type="number".
$("input").click(function () {
$(this).val('');
$(this).prop('type', 'number');
});
This is my first answer and I hope I've helped.
这是我的第一个答案，希望对您有所帮助。
回答by Lipa
Use type="tel" and css mask "disc" is working for me, but Password Managers (like LastPass) need to have input with type="password" to start working.
So, my idea is to change input type depends on device. I used Browser Detection by hisorange (for Laravel): "password" type for Desktop, and "tel" type for Mobile divices.
CSS:
使用 type="tel" 和 css 掩码 "disc"对我有用，但密码管理器（如 LastPass）需要输入 type="password" 才能开始工作。
所以，我的想法是根据设备改变输入类型。我使用了hisorange的浏览器检测（对于Laravel）：桌面的“密码”类型和移动设备的“电话”类型。
CSS：
.password-mask {
-webkit-text-security: disc;
-moz-webkit-text-security: disc;
-moz-text-security: disc;
}
Controller:
控制器：
if (Browser ::isMobile() || Browser ::isTablet()) {
$device = 'm';
} else {
$device = 'd';
}
Blade:
刀刃：
<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">
回答by Hamidreza Sadegh
type = "tel"
.class {
-webkit-text-security: disc;
-moz-webkit-text-security: disc;
-moz-text-security: disc;
}
回答by Jayo2k
or you could create your own keyboard with javascript and CSS, and when the user type a number, bisplay * and store the value in a javascript variable. Just lik I did and it makes user login very smooth and easy... Mobile first
或者您可以使用 javascript 和 CSS 创建自己的键盘，当用户输入数字时， bisplay * 并将值存储在 javascript 变量中。就像我做的那样，它使用户登录非常顺畅和轻松......移动优先
