使用 CSS/Javascript 将文本字段中的文本更改为点

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3574474/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 01:34:09  来源:igfitidea点击:

Change text to dots in text field with CSS/Javascript

javascriptcsssecurity

提问by andreas

Is there a way to "mask" the input of a text field to act like a password field (to show dots instead of text) without making the text box of type password? We prefer CSS than javascript...

有没有办法“屏蔽”文本字段的输入以充当密码字段(显示点而不是文本)而不使文本框类型为密码?我们更喜欢 CSS 而非 javascript...

any ideas?

有任何想法吗?

回答by graemeboy

This may be the answer you were looking for:

这可能是您正在寻找的答案:

-webkit-text-security: disc;
-moz-text-security: disc;
text-security: disc;

回答by derekerdmann

There are ways to change the way the characters are displayed when they're being input into the field (http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/), but password masking cannot be achieved using basic CSS.

有多种方法可以更改字符在输入字段时的显示方式(http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/),但是使用基本 CSS 无法实现密码屏蔽。

The only possible solution I can think of would be to create a font that only consists of your desired mask character (using that for every character) and then using an @font-facedeclaration to tell the input field to use that font. However, @font-facehas poor browser support, so relying on it for such an important function is a dangerous idea.

我能想到的唯一可能的解决方案是创建一个仅包含所需掩码字符的字体(对每个字符使用它),然后使用@font-face声明来告诉输入字段使用该字体。然而,@font-face它的浏览器支持很差,所以依赖它来实现如此重要的功能是一个危险的想法。

Is there any reason that you don't want to use a standard password input field? Consider the benefits:

您是否有任何理由不想使用标准密码输入字段?考虑以下好处:

  • Password fields work in everybrowser
  • The masking is automatic
  • They can be extensively styled, but it won't interfere with the password masking
  • Browsers don't use autofill on password fields (unless there's a password manager installed)
  • 密码字段适用于所有浏览器
  • 掩码是自动的
  • 它们可以有多种样式,但不会干扰密码屏蔽
  • 浏览器不对密码字段使用自动填充(除非安装了密码管理器)

If you need an input that works like a password field, just use the password field. Don't reinvent the wheel.

如果您需要一个像密码字段一样工作的输入,只需使用密码字段。不要重新发明轮子。

回答by fredley