如何输入type =" tel"以type =" password"的形式工作 [英] How to make input type="tel" work as type="password"

问题描述

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

When using the input tag as type="tel" the keyboard on touch devices correspond with the type of input box. However, I wish to keep the value in the input tag hidden (as with the password type). The normal behaviour would be to have each character hidden as the user is typing.

<input type="tel">

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

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

This solution works in most browsers, but not in IE.

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

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

This solution doesn't work as expected.

有没有办法完成我想要做的事情？

Is there any way to accomplish what i'm trying to do?

推荐答案

我知道这已经很好了，来自 jdgregson 的工作和接受的解决方案，但我真的很喜欢 rybo111 的基于自定义字体的解决方案的想法，并想尝试一下。

I know this already has a nice, working and accepted solution from jdgregson, but I really liked rybo111's idea of a custom font based solution and wanted to give it a try.

我们的想法是创建一个只包含圆圈的字体，这样当字体系列应用于输入元素时，似乎没有显示任何字符。

The idea is to create a font that only contains circles so that when the font family is applied to the input element, seemingly no characters are displayed.

因此，如果有人仍然对使用体面的浏览器支持且没有jdgregson的答案已知问题，我为此创建了一个简单的字体。

So in case anyone's still interested in a non-JS solution with decent browser support and without the known issues with jdgregson's answer, I created a simple font for this.

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

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

可以通过从克隆仓库或RawGit中包含 dist / text-security.css 来使用该字体。相似的东西。包含css后，您可以通过将元素的 font-family 设置为'text-security-disc'来使用该字体。 。

The font can be used by including the dist/text-security.css either from cloned repo or from RawGit or something similar. After including the css you can use the font by setting the element's font-family to '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-text-security的精神，我还添加了圈子 和square选项用作隐藏符号。

In the spirit of "polyfilling" the -webkit-text-security, I also added the "circle" and "square" options to use as the hiding symbol.

我在Android 5.0上使用Chrome v49，IE11，Microsoft Edge 25和Chrome v50进行了测试tel类型的输入打开数字键盘。

I've tested this with Chrome v49, IE11, Microsoft Edge 25 and Chrome v50 on Android 5.0, in which the input of type "tel" opens the number keypad.

这篇关于如何输入type =" tel"以type =" password"的形式工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！