Question

我正在使用contenteditable div而不是输入元素，因为它们在输入框中的样式时更灵活。我只是想知道是否有办法使输入看起来像一个输入元素，其类型设置为密码，如下所示：

<input type='password'>

我希望这很清楚。感谢。

Answer 1

我遇到了这个问题，因为我试图模仿密码输入，但是用• s覆盖另一个div并不是我的选择，因为我希望它在没有JavaScript的情况下工作，太。
然后是text-security: disc，但到目前为止还没有足够的支持。

我所做的就是在FontStruct上创建一个字体，其中所有拉丁字符（包括diacritic字符）看起来都像•。

以下是我Dropbox上文件的链接。

使用此功能时，只需在css文件中添加

即可

@font-face {
  font-family: 'password';
  src: url('../font/password.woff2') format('woff2'),
       url('../font/password.woff') format('woff'),
       url('../font/password.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

然后使用它，只需将font-family: 'password'应用于您的元素。

P.S。如果Dropbox链接已关闭并且您碰巧已将其下载，请随时替换该链接。否则只需给出这个答案评论

Answer 2

您必须找到mozilla和co。的浏览器特定CSS设置，但在webkit中它看起来像这样。你还需要通过javascript添加keypress处理程序。

//you could use javascript to do nice stuff
var fakepassw = document.getElementById('password');
//fakepassw.contentEditable="true"; 
fakepassw.addEventListener('focus', function(e) { /*yourcode*/ }, false);
fakepassw.addEventListener('keyup', function(e) {
  console.log(e.keyCode)
}, false);

#password {
  -webkit-text-security: disc;
  height: 20px;
  width: 100px;
  -webkit-appearance: textfield;
  padding: 1px;
  background-color: white;
  border: 2px inset;
  -webkit-user-select: text;
  cursor: auto;
}

<div id="password" contenteditable="true">yourpassword</div>

但无论如何，密码字段只是element.innerHTML="yourpassword"和element.innerText="•••••••"

的组合元素

您也可以使用javascript执行此操作，并使用innerText填充"•"。

Answer 3

为了摆脱密码记住，我将密码视为输入字段，并“模糊”键入的文本。

它比本机密码字段更“安全”，因为选择键入的文本会将其显示为明文，但不会记住密码。它还取决于Javascript的激活。

<input style="background-color: rgb(239, 179, 196); color: black; text-shadow: none;" name="password" size="10" maxlength="30" onfocus="this.value='';this.style.color='black'; this.style.textShadow='none';" onkeypress="this.style.color='transparent'; this.style.textShadow='1px 1px 6px green';" autocomplete="off" type="text">

Answer 4

这是我的解决方案。它并不完美（它最后只处理额外/删除的字符），但它很短：

HTML：

<input id="my_id" type="text" oninput="input_to_bullets (this)" onfocus="this.value = ''; this.input_pw = '';" autocomplete="off" />

JavaScript的：

function input_to_bullets (el) {
   if (! el.input_pw) {
      el.input_pw = '';
   }
   var val = el.value;
   var len = val.length;
   var chr = val.substr (len - 1);
   if (chr != "•") {
      el.input_pw += chr;
   } else {
      el.input_pw = el.input_pw.substr (0, len);
   }
   el.value = el.value.replace (/./g, "•");
}

JavaScript检索密码：

var password = document.getElementById ('my_id').input_pw;

Answer 5

@Ol Sen 回答的编辑队列已满。这是可运行的代码片段。

请注意 JavaScript 是完全可选的。对于支持 -webkit-text-security 的浏览器，这确实是一个纯 CSS 解决方案。

MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security

//you could use javascript to do nice stuff
var fakepassw = document.getElementById('password');
//fakepassw.contentEditable="true"; 
fakepassw.addEventListener('focus', function(e) { /*yourcode*/ }, false);
fakepassw.addEventListener('keyup', function(e) {
  console.log(e.keyCode)
}, false);

#password {
  -webkit-text-security: disc;
  /* all styles below this line are optional */
  height: 20px;
  width: 100px;
  -webkit-appearance: textfield;
  padding: 1px;
  background-color: white;
  border: 2px inset;
  -webkit-user-select: text;
  cursor: auto;
}

<div id="password" contenteditable="true">yourpassword</div>

使用contenteditable div时模仿密码类型输入

5 个答案: