Mặt nạ mật khẩu một phần trên trường nhập

Question

Vì vậy, tôi cần che dấu trường nhập SSN #, giả sử số ssn là 123-45-6789, tôi cần hiển thị ***-**-6789 (thời gian thực khi nhập mỗi chữ số) nhưng tôi vẫn cần giữ lại giá trị ban đầu để nộp.

Tôi đã đến mức tôi có thể làm điều đó nếu người dùng nhập đúng giá trị nhưng nó phá vỡ nếu người dùng thực hiện bất kỳ điều gì khác như xóa hoặc di chuyển con trỏ đến vị trí ngẫu nhiên và thêm/xóa số, sao chép dán/xóa, vv Tôi thực sự không muốn nghe một loạt các sự kiện để thực hiện công việc này nếu điều đó thậm chí có thể.

Tôi cũng đã thử một div ngồi trên đầu trường nhập để hiển thị mặt nạ ssn trong khi ssn thực trong suốt/ẩn đằng sau nó nhưng lại mất chức năng có thể thêm/xóa/chọn xóa/dán trong các phần ngẫu nhiên (khác khi chúng bắt đầu ở cuối) và con trỏ không hoàn toàn đồng bộ với phần cuối của số ssn (kích thước dấu hoa thị là vấn đề). Điều này cũng đã phá vỡ trên một số trình duyệt di động.

Tôi cũng nghĩ có hai trường nhập riêng biệt, một mật khẩu loại và một loại văn bản ngồi ngay cạnh nhau, nhưng lại nổi bật và xóa/dán giữa hai trường hợp sẽ là một vấn đề.

Lý tưởng nhất là nếu có thứ gì đó ở đó để có trường nhập có hai loại, một phần của mật khẩu loại giá trị và phần còn lại là văn bản nhập, điều đó thật tuyệt vời. Btw này là dành cho ứng dụng js phản ứng.

TLDR: Cần một trường nhập đầy đủ chức năng sẽ thực hiện việc đặt mật khẩu chỉ trên 5 chữ số đầu tiên của ssn và văn bản thuần cho 4 chữ số cuối cùng (trong khi có giá trị văn bản đầy đủ có sẵn để gửi).

Cảm ơn!

Answer 1

Điều này có thể hơi cẩu thả, nhưng nó hoạt động như bạn muốn, là tất cả trong một trường văn bản, trả lại SSN chính xác đầy đủ (mặc dù thay thế 5 giá trị đầu tiên bằng dấu đầu dòng) và cho phép chỉnh sửa ở bất kỳ đâu trong cánh đồng.

<input type="password" id="ssn" maxlength=9 /> 
 

 
<script> 
 
    var ssn = document.getElementById('ssn'); 
 
    ssn.addEventListener('input', ssnMask, false); 
 
    var ssnFirstFive = ""; 
 
    var secondHalf = ""; 
 
    var fullSSN = ""; 
 

 
    function ssnMask(){ 
 
     if (ssn.value.length <= 5){ 
 
      ssn.type = 'password'; 
 
     } 
 
     else{ 
 
      detectChanges(); 
 
      secondHalf = ssn.value.substring(5); 
 
      ssn.type = 'text'; 
 
      ssn.value = "•••••"; 
 
      ssn.value += secondHalf; 
 
      fullSSN = ssnFirstFive + secondHalf; 
 
     } 
 
    } 
 

 
    function detectChanges() { 
 
     for (var i = 0; i < 5; i++){ 
 
      if (ssn.value[i] != "•"){ 
 
       ssnFirstFive = ssnFirstFive.substring(0, i) + ssn.value[i] + ssnFirstFive.substring(i+1); 
 
      } 
 
     } 
 
    } 
 
</script>

Về cơ bản, mỗi khi đầu vào thay đổi, nó sẽ kiểm tra để xem nếu nó phù hợp với 5 đầu tiên từ trước đó, và nếu không, nó sẽ cập nhật các nhân vật cần thiết.

Answer 2

Bạn có thể sử dụng 3 trường khác nhau và tạo các trường mật khẩu sau đó.

Thêm trình xử lý tiêu điểm thay đổi loại của chúng thành văn bản và trình xử lý mờ làm thay đổi chúng thành mật khẩu.

Bạn có thể kết hợp chúng trước khi gửi hoặc trên máy chủ.

#ssn1{width:25px;} 
 
#ssn2{width:20px;} 
 
#ssn3{width:35px;}

<input type="password" name="ssn" maxlength=3 id="ssn1" /> 
 
<input type="password" name="ssn" maxlength=2 id="ssn2"/> 
 
<input type="password" name="ssn" maxlength=4 id="ssn3"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
    $('[name="ssn"]').focus(function() { 
 
    $(this).attr("type", "text") 
 
    }); 
 
    $('[name="ssn"]').blur(function() { 
 
    $(this).attr("type", "password") 
 
    }); 
 
</script>

Bạn cũng có thể viết một handler vượt qua tất cả để một SSN đầy đủ để được dán trong lĩnh vực đầu tiên và có tất cả ba lĩnh vực được thiết lập.

Đây là gần nhất bạn đang đi trừ khi bạn làm việc với một hộp văn bản đầy đủ duy nhất và cung cấp cho người dùng khả năng che dấu và vạch mặt trường.

Trong các ứng dụng sản xuất, thực sự là phương pháp này tôi thực hiện:

Masked:

Vạch mặt:

Bạn có thể thực hiện bạn sở hữu tập trung/chức năng mờ để tự động hiển thị/mặt nạ trường nếu cần.