如何使输入类型＝“;电话“;按类型工作=“;密码”;

How to make input type="tel" work as type="password"

本文关键字：类型 工作 密码 何使 输入 电话      更新时间：2023-09-26

将input标记用作type="tel"时，触摸设备上的键盘与输入框的类型相对应。但是，我希望隐藏input标记中的值（与password类型一样）。正常的行为是在用户输入时隐藏每个字符。

<input type="tel">

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

此解决方案适用于大多数浏览器，但不适用于IE。

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

此解决方案无法按预期工作。

有什么办法可以完成我想做的事情吗？

更新2020-06-19

如果你想要的只是更好地使用"pin"输入，我现在建议你坚持使用2016年OP不起作用的inputmode属性。浏览器支持仍然非常有限，但它终于在iOS Safari上运行了，作为一种解决方案，它比避免input type="password" altoghether简单得多，也可能更安全。

<input type="password" inputmode="tel" />

因此，对于OP的特定用例，我现在推荐以上内容，即使浏览器支持率不是100%。我知道有些人来这篇文章实际上是出于其他原因寻找type="password"的替代方案，比如绕过密码自动完成，我下面的原始答案可能仍然对他们有帮助。

另外请注意，我在下面推荐的密码字体项目自从我给出这个答案以来已经进行了一些更新，现在有了一些不同的安装说明。

原始答案

我知道这已经有了jdgregson的一个不错的、有效的、可接受的解决方案，但我真的很喜欢rybo111关于基于自定义字体的解决方案的想法，并想试一试。

这个想法是创建一个只包含圆圈的字体，这样当字体族应用于输入元素时，似乎不会显示任何字符。

因此，如果有人仍然对一个具有良好浏览器支持的非JS解决方案感兴趣，并且jdgregson的答案没有已知的问题，我为此创建了一个简单的字体。

GitHub回购：https://github.com/noppa/text-security

JSFiddle演示：https://jsfiddle.net/449Lamue/6/

该字体可以通过包含来自克隆repo或RawGit或类似内容的dist/text-security.css来使用。在包含css之后，您可以通过将元素的font-family设置为'text-security-disc'来使用字体。

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/noppa/text-security/master/dist/text-security.css">
<style>
     input [type="tel"] {
         font-family: "text-security-disc";
         -webkit-text-security: disc;
     }
</style>

本着"polyfilling"-webkit文本安全的精神，我还添加了"圆形"answers"方形"选项作为隐藏符号。

我在安卓5.0上用Chrome v49、IE11、Microsoft Edge 25和Chrome v50进行了测试，其中输入"tel"可以打开数字键盘。

有几种方法可以实现这一点：

1） -webkit文本安全

最优雅的解决方案是使用内置的-webkit-text-security: circle;CSS样式，这正是为了实现这一点。不幸的是，这是不可移植的，并且在IE或Edge上不受支持。如果你选择使用这种方法，你可以在这里找到一个变通方法来获得其他浏览器的支持。

2） 选择后将类型更改为密码

正如Fidelit90和其他人所指出的，在用户选择type="tel"后，您可以尝试将其切换为type="password"。它在iOS中运行良好，但在Android中，它无法启动第一次敲击，然后在第二次敲击时作为默认键盘启动。

3） 使用只有一个字符的字体

rybo111在下面的评论中提出的另一个想法是使用只有密码点字符的字体。这可能是最便携、最不易破解的解决方案。一个缺点是用户看不到他们刚刚键入的字符，这是现代移动密码字段的常见行为。这里张贴了一个全面的小提琴。

4） 当用户键入时，将文本复制到隐藏的输入中

我的想法（如下）是使用第二个输入来存储真实号码，然后在用户键入时隐藏号码。请注意，这将从最终号码中过滤所有非电话号码字符，尽管您可以修改变量以接受您想要的任何内容。

经过测试并可用于：

  • iOS 9 Safari
  • Android 6.0 Chrome
  • Internet Explorer 11
  • 火狐45
  • 铬50
  • 歌剧36
  • Microsoft Edge 25

var BACKSPACE_CHARS = [8, 46, 229];
function hideNumber(fakeInput, event) {
    var hideChar = '*';
    // add characters that you want to appear in the final number to this
    // string -- leave the string empty to allow all characters
    var phoneChars = '0123456789()-+';
    var keyCode = event.keyCode || event.charCode;
    var key = String.fromCharCode(keyCode)+'';
    var realInput = document.getElementById("hidden-number");
    var len = fakeInput.value.length;
    fakeInput.value = '';
    if(phoneChars.indexOf(key) > -1 || !phoneChars.length) {
        realInput.value += key;
    } else {
        if(BACKSPACE_CHARS.indexOf(keyCode) < 0) {
            --len;
        }
    }
    for(var i=0; i<len; i++) { // no String.repeat() in IE :(
        fakeInput.value += hideChar;
    }
    updateDisplay();
}
function backspace(event) {
    var keyCode = event.keyCode || event.charCode;
    var realInput = document.getElementById("hidden-number");
    if(BACKSPACE_CHARS.indexOf(keyCode) > -1) { // backspace or delete
        var len = realInput.value.length;
        realInput.value = realInput.value.slice(0, len-1);
    } 
    updateDisplay();
}
function updateDisplay() {
    var realInput = document.getElementById("hidden-number");
    var display = document.getElementById("display");
    display.innerHTML = realInput.value || '';
}
<input type="tel" name="number" id="number-hider" onkeypress="hideNumber(this, event)" onkeydown="backspace(event)" onblur="hideNumber(this)">
<input type="hidden" name="realnumber" id="hidden-number">
<div id="display"></div>

已知错误：

  • 如果用户在文本框的中间点击或单击，并键入或退格，字符将从实数的末尾添加或删除

使用noppa的答案和他的GitHub字体以及jdgregson的答案，这里有一个交钥匙的CSS解决方案（fiddle）：

@font-face {
  font-family: "password-mask";
  src: url(data:font/woff;charset:utf-8;base64,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) format("woff");
}
.numeric-password {
  font-family: password-mask;
}
.numeric-password::placeholder {
  font-family: initial;
}
<input type="tel" class="numeric-password" placeholder="test" />

为了支持旧的iOS和Android设备，您只需要添加另一个数据URI字体面定义和密码掩码字体的ttf文件。使用eot字体文件的IE也是如此，但大多数现代浏览器都支持woff，并且应该使用这种CSS。

我创建了一个fiddle，它在您聚焦后立即用password输入替换初始tel（需要jQuery）：

var value = "",
	isPWD = false;
$('#wrap')
  .on("focus", "#input", function() {
  	if (!isPWD) {
      var pass = $('<input id="input" type="password">');
      $(this).replaceWith(pass);
      isPWD = true;
      pass.focus();
    }    
  })
  .on("change", "#input", function() {
  	value = $(this).val();
    $("#span").text(" = " + value);
  })
  .on("blur", "#input", function() {
  	var tel = $('<input id="input" type="tel">');
    $(this).replaceWith(tel);
    isPWD = false;
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
  <input id="input" type="tel"/>
  <span id="span"></span>
</div>

到目前为止，我还没有在移动设备上测试过这一点，所以我不确定是否在所有情况下都能将数字键盘带给用户。

编辑：至少我的移动IE没有显示数字键盘，只显示标准文本字段。

相关文章：