How can I display masked account number on hover?-CodePudding

I have an account number which is masked on initial display. When user hover over the account number I want to display the number. As of now value is hardcoded.

Project uses html, jquery, js

How can I achieve this functionality?

<table>
  <tr>
    <td> Account Number </td>
    <td> <input type="text" value="4xxx763"></td>
  </tr>
</table>

CodePudding user response：

Using data attributes, you can store the account number and partial account number and pull them back in event handlers.

let acctnumber = document.querySelector(".acct-number");

acctnumber.value = acctnumber.getAttribute("data-partial")

acctnumber.addEventListener("mouseover",function(){
  acctnumber.value = acctnumber.getAttribute("data-acct")
});

acctnumber.addEventListener("mouseout",function(){
  acctnumber.value = acctnumber.getAttribute("data-partial")
});

<input  type="text" data-partial="4xxx763" data-acct="4123763">