Bắt chước đầu vào loại mật khẩu khi sử dụng div có thể chỉnh sửa được

Question

Tôi đang sử dụng div có thể chỉnh sửa nội dung thay vì các yếu tố đầu vào vì chúng linh hoạt hơn khi tạo kiểu trong hộp nhập. Tôi chỉ tự hỏi nếu có cách để làm cho đầu vào trông giống như một yếu tố đầu vào với loại được đặt thành mật khẩu, như vậy:

<input type='password'> 

Tôi hy vọng điều đó là đủ rõ ràng. Cảm ơn.

Answer 1

bạn sẽ phải tìm hiểu cài đặt CSS cụ thể của trình duyệt cho mozilla và co .. nhưng trong webkit nó trông như thế này. bạn cũng cần thêm trình xử lý nhấn phím qua javascript cho nó.

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

nhưng dù sao, ruộng mật khẩu chỉ là kết hợp các yếu tố với element.innerHTML="yourpassword" và element.innerText="•••••••"

bạn có thể làm điều này với javascript quá và điền innerText với "•"

Answer 2

Tôi đã xem qua câu hỏi này khi tôi đang cố gắng để cũng bắt chước một đầu vào mật khẩu, nhưng phủ một div khác với • s không phải là một tùy chọn cho tôi, vì tôi cũng muốn nó hoạt động mà không cần JavaScript.
Sau đó, có text-security: disc nhưng không đủ hỗ trợ cho thời điểm này.

Vì vậy, những gì tôi đã làm là tạo phông chữ trên FontStruct trong đó tất cả các ký tự La tinh (bao gồm cả diacritic hình) trông giống như •.

Đây là liên kết đến tệp trên Dropbox của tôi.

Khi sử dụng này, chỉ cần thêm này trong file css của bạn

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

Sau đó, để sử dụng nó, chỉ cần áp dụng font-family: 'password' đến yếu tố của bạn.

P.S. Nếu liên kết Dropbox bị hỏng và bạn có thể tải xuống, hãy thay thế liên kết. Nếu không, chỉ cần cung cấp cho câu trả lời này một nhận xét

Answer 3

Để loại bỏ mật khẩu, tôi đã xử lý mật khẩu làm trường nhập và "làm mờ" văn bản đã nhập.

Ít an toàn hơn trường mật khẩu gốc vì việc chọn văn bản đã nhập sẽ hiển thị văn bản đó dưới dạng văn bản rõ ràng nhưng mật khẩu không được ghi nhớ. Nó cũng phụ thuộc vào việc kích hoạt 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

Đây là giải pháp của tôi. Đó không phải là hoàn hảo (nó chỉ xử lý bổ sung/ký tự xóa ở cuối), nhưng nó khá ngắn:

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, "•"); 
} 

hoạt Javascript để lấy lại mật khẩu:

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