html - contenteditable div の使用中にパスワード タイプの入力を模倣する

Question

入力ボックス内のスタイリングに関しては、より柔軟であるため、入力要素の代わりに contenteditable div を使用しています。次のように、入力をパスワードに設定されたタイプの入力要素のように見せる方法があるかどうか疑問に思っています。

<input type='password'>

それが十分に明確であることを願っています。ありがとう。

Answer 1

mozilla および co.. のブラウザー固有の CSS 設定を見つける必要がありますが、webkit では次のようになります。また、javascript を介して keypress ハンドラーを追加する必要があります。

<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を埋めることができます"•"

Answer 2

これが私の解決策です。完璧ではありません (最後に追加/削除された文字のみを処理します) が、かなり短いです:

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;