Имитировать ввод типа пароля при использовании contenteditable div

Я использую contenteditable divs вместо входных элементов, потому что они более гибкие, когда дело доходит до стиля в поле ввода. Мне просто интересно, есть ли способ сделать вход похожим на элемент ввода с его типом, установленным на пароль, например:

<input type='password'>

Я надеюсь, что достаточно ясно. Спасибо.

7
contenteditable html input passwords

4 ответов

вам нужно будет узнать конкретные настройки CSS браузера для mozilla и co.. но в 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 тоже и заполнить innerText с "•"

5

я столкнулся с этим вопросом, когда я пытался имитировать ввод пароля, но накладывая другой div с •s не был вариантом для меня, так как я хотел, чтобы он работал без JavaScript.
То есть text-security: disc, но на данный момент для этого недостаточно поддержки.

Итак, что я сделал, это создать шрифт на FontStruct в котором все латинские символы (включая диакритических ones) выглядят как •.

вот ссылка на файл на my в 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 и вы случайно его скачал, не стесняйтесь, чтобы заменить ссылку. В противном случае просто дайте этому ответу комментарий

7

чтобы избавиться от пароля запомнить, я обработал пароль как поле ввода и" размыл " введенный текст.

это менее "безопасно", чем собственное поле пароля, так как выбор типизированного текста покажет его как чистый текст, но пароль не запоминается. Это также зависит от активации 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">
1

вот мое решение. Он не идеален (он обрабатывает только дополнительные / удаленные символы в конце), но он довольно короткий:

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;
0