如何让input type="tel"的功能与type="password"相同

5 浏览
0 Comments

如何让input type="tel"的功能与type="password"相同

当在触摸设备上使用input标签的type=\"tel\"时，键盘与输入框的类型相对应。然而，我希望保持input标签中的值隐藏（与password类型一样）。\n正常情况下，用户输入时每个字符都应该被隐藏。\n\n

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

\n这个解决方案在大多数浏览器中可以工作，但在IE中不行。\n\n这个解决方案无法按预期工作。\n有没有办法实现我想做的事情？

0

3 答案

0 Comments

如何将``作为``使用。

问题的原因是为了支持iOS和Android设备上的旧版本浏览器，需要添加另一个data URI的字体定义，其中包含密码掩码字体的ttf文件。对于IE浏览器，可以使用eot字体文件，但大多数现代浏览器都支持woff格式，因此可以使用这个CSS解决该问题。

解决方法是使用CSS代码中的`@font-face`声明来定义一个名为`password-mask`的自定义字体，然后将其应用于``元素的`font-family`属性。通过这种方式，可以将``元素的外观样式与``相同。此外，还需要添加`::placeholder`选择器，将`font-family`属性设置为`initial`，以使占位符文本显示默认字体样式。

下面是完整的解决方案代码：

@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;
}

这样，``元素的`type`属性设置为`tel`时，就会以密码掩码的形式显示输入的内容。

0
0 Comments

如何将输入类型"tel"作为类型"password"工作

问题的出现原因：没有直接的方法将输入类型为"tel"的输入框作为密码框来使用。虽然可以使用内置的CSS样式"-webkit-text-security: circle;"，但该方法不具有移植性，并且不支持IE和Edge浏览器。其他方法也存在一些问题，如在Android上无法正常工作。

解决方法：

1) 使用-webkit-text-security样式：使用内置的"-webkit-text-security: circle;"样式可以实现输入框作为密码框的效果，但不适用于IE和Edge浏览器。可以在其他浏览器上找到解决办法。

2) 在选择后将类型更改为密码类型：在用户选择输入框后，可以将类型从"tel"更改为"password"。这种方法在iOS上可以完美工作，但在Android上会出现问题。

3) 使用只有一个字符的字体：使用只包含一个密码点字符的字体也是一种解决方法。这种方法可能是最具移植性和最简单的解决方法，但用户无法看到他们刚刚输入的字符。

4) 将文本复制到隐藏的输入框中：通过使用第二个输入框来存储真实的数字，并在用户输入时隐藏数字来实现输入框作为密码框的效果。这种方法在多个浏览器上进行了测试并且可以正常工作。

已测试和适用于的浏览器：

- iOS 9 Safari

- Android 6.0 Chrome

- Internet Explorer 11

- FireFox 45

- Chrome 50

- Opera 36

- Microsoft Edge 25

已知问题：

- 如果用户在文本框中间点击或点击并输入或删除字符，字符将从真实数字的末尾添加或删除。

- 如果用户输入数字非常快，事件只会触发一次。

以上是解决将输入类型"tel"作为类型"password"的方法和已知问题。其中使用"-webkit-text-security: circle;"样式和使用只有一个字符的字体是两种较为简单和直接的解决方法。使用第二个输入框存储真实数字并隐藏输入的方法在多个浏览器上经过测试可以正常工作。

0
0 Comments

问题的原因是希望将input标签的type属性设置为"tel"时，能够以密码的形式进行输入，但是原生的"type=password"属性不能实现这一效果。解决方法是使用input标签的inputmode属性来替代"type=password"属性，将其值设置为"tel"。以下是具体步骤：

1. 在input标签中添加inputmode属性，并将其值设置为"tel"：

这样设置后，输入框将以密码形式显示，并且弹出数字键盘。

注意：虽然浏览器对于inputmode属性的支持仍然有限，但至少在iOS Safari上已经可以正常工作。

对于其他原因寻找"type=password"替代方案的人来说，可以考虑使用自定义字体的解决方案。具体步骤如下：

1. 创建一个只包含圆圈字符的字体文件。

2. 将字体文件包含在CSS中，并将其应用于input元素的font-family属性。

这样设置后，输入框将以圆圈字符的形式显示，而不是实际的输入内容。此解决方案已在Chrome、IE11、Microsoft Edge和Android 5.0上进行了测试。

以上就是解决问题的原因和方法。希望对您有所帮助！

0