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>>Solution :
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 class="acct-number" type="text" data-partial="4xxx763" data-acct="4123763">