CODEWITHSUNDEEP
javascripthtmlcsshtml-tabledata-masking
Link
Link

Reputation: 73

Table cells as Password but Display the Last Four Digits

I want to hide some information on my table cells but display the last four digits of the cells, I am able to hide the cell using the CSS below but I do not know how to show the last four digits of the cells.

I am also aware that with the CSS method that I used below to hide the table cells information, my content can still be inspected, and viewed but I am using the content on a mobile app, not a website which I think is safe for what I want to use the content for.

How to display the last four digits on the table cells .

.hidetext {
  -webkit-text-security: circle;
}
<table>

  <tr>
    <td width="120">ID NUMBER</td>
    <td width="15">:</td>
    <td id="data2" class="hidetext">1234567890</td>
  </tr>

  <tr>
    <td>PHONE</td>
    <td>:</td>
    <td id="data3" class="hidetext">0000000000</td>
  </tr>

</table>

Upvotes: 0

Views: 163

Answers (3)

83C10
83C10

Reputation: 1212

I would recommend configuring your backend to return only last 4 digits of a sensitive number. Sending sensitive data to frontend and "hiding" it with CSS can never be assumed to be safe. Also, the -webkit-text-security is non-standard and shouldn't be used in production websites - it doesn't work in Firefox at all.

Upvotes: 2

Darius
Darius

Reputation: 11

I have no clue in CSS, but why not using JS for that? In plain JavaScript it will be:

let hidetext = document.querySelectorAll('.hidetext')
hidetext.forEach(elt => {
  let text = elt.textContent
  elt.textContent = text.substring(0, text.length-4) + '****'
})
<table>
  <tr>
    ...
    <td id="data2" class="hidetext">1234567890</td>
  </tr>
  <tr>
    ...
    <td id="data3" class="hidetext">0000000000</td>
  </tr>  
</table>

Upvotes: 1

Syed Arsalan Hussain
Syed Arsalan Hussain

Reputation: 409

You can use this code to iterate the string and replace it with "X" or with your desired character.

var id_number = document.getElementById('data2');
id_number.innerHTML = new Array(id_number.innerHTML.length-3).join('x') + 
id_number.innerHTML.substr(id_number.innerHTML.length-4, 4);
console.log(id_number.innerHTML);

var phone = document.getElementById('data3');
phone.innerHTML = new Array(phone.innerHTML.length-3).join('x') + 
phone.innerHTML.substr(phone.innerHTML.length-4, 4);
console.log(phone.innerHTML);
<table>
                  
              <tr>
                    <td width = "120">ID NUMBER</td>
                    <td width = "15">:</td>
                    <td id="data2" class="hidetext">1234567890</td>
                  </tr>
                  
                  <tr>
                    <td>PHONE</td>
                    <td>:</td>
                    <td id="data3" class="hidetext">0000000000</td>
                  </tr>  
                  
</table>

Upvotes: 1

Related Questions