7

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

<input type='password'>

我希望这足够清楚。谢谢。

4

5 回答 5

11

您将不得不为 mozilla 和 co.. 找出浏览器特定的 CSS 设置。但在 webkit 中它看起来像这样。您还需要通过 javascript 添加按键处理程序。

<style>
#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;
}
</style>
<div id="password" contenteditable="true">yourpassword</div>
<script>
    //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);
</script>

但无论如何，密码字段只是与element.innerHTML="yourpassword"和的组合元素element.innerText="•••••••"

你也可以用 javascript 来做这个，并用"•"

于 2013-04-28T00:36:45.120 回答
10
于 2016-12-05T20:13:47.890 回答
1

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

它不如本机密码字段“安全”，因为选择键入的文本会将其显示为明文，但不会记住密码。它还取决于激活 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">
于 2017-04-11T18:25:58.763 回答
1

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

请注意，JavaScript 是完全可选的。对于支持-webkit-text-security.

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>

于 2021-03-13T07:29:20.900 回答
0

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

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;
于 2017-08-13T15:40:43.873 回答