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

Question

input要素の代わりにcontenteditable divを使用しています。これは、入力ボックス内のスタイリングに関してより柔軟性があるためです。入力を作るための方法があります場合、私はちょうど思ったんだけどそうのように、パスワードを設定し、その型を持つinput要素のように見える：

<input type='password'> 

私はそれが十分明確であると思います。ありがとう。

Answer 1

あなたはmozillaとco ..のブラウザ固有のCSS設定を見つけなければなりませんが、webkitではこのように見えます。また、keypressハンドラを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> 

とにかく、パスワードフィールドは、ちょうどあなたもJavaScriptでこれを行うと"•"

Answer 2

でのinnerTextを埋めることができelement.innerHTML="yourpassword"とelement.innerText="•••••••"

を持つ要素を組み合わせて、私はこの質問に出くわしましたパスワード入力も真似しますが、別のdivを•で上書きすることは私にとってはオプションではありませんでした。なぜなら、JavaScriptなしで動作させたいからです。
text-security: discがありますが、この時点では十分なサポートがありません。

私がやったことは、すべてのラテン文字（diacriticを含む）が•のように見えるFontStructにフォントを作成することです。

ここに私のDropboxのファイルへのリンクがあります。

これを使用して、単にあなたの要素にfont-family: 'password'を適用し、それを使用する次に

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

これを追加します。

P.S. Dropboxのリンクがダウンしていて、それをダウンロードした場合は、リンクを交換してください。それ以外の場合は、この回答にコメントを付けてください。

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;