2

Considering a password input field I want to show the last character of input for milliseconds and then change back to normal password input like this:

var showLength = 1;
var delay = 1000;
var hideAll = setTimeout(function() {}, 0);

$(document).ready(function() {
  $("#password").on("input", function() {
    var offset = $("#password").val().length - $("#hidden").val().length;
    if (offset > 0) $("#hidden").val($("#hidden").val() + $("#password").val().substring($("#hidden").val().length, $("#hidden").val().length + offset));
    else if (offset < 0) $("#hidden").val($("#hidden").val().substring(0, $("#hidden").val().length + offset));

    // Change the visible string
    if ($(this).val().length > showLength) $(this).val($(this).val().substring(0, $(this).val().length - showLength).replace(/./g, "•") + $(this).val().substring($(this).val().length - showLength, $(this).val().length));

    // Set the timer
    clearTimeout(hideAll);
    hideAll = setTimeout(function() {
      $("#password").val($("#password").val().replace(/./g, "•"));
    }, delay);
  });
});
#hidden {
  opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="password" type="text" value="" />
<input id="hidden" type="text" value="" />

The above code works fine except one annoying issue:

If you type 123456789 and try to remove the first or second or any of the characters inside the input field you would see that it only removes the last character of hidden input (which is the input field we want to send its data to the server)

Seems that we should somehow detect the position of the type cursor (which may be moved by mouse or arrow keys on the keyboard) and remove that specific character...

How can we fix this issue?

Note: I searched Stack Overflow, and none of the codes or jQuery plugins can do this properly. I would like a once-for-all solution for this.

halfer
  • 19,824
  • 17
  • 99
  • 186
Sara Ree
  • 3,417
  • 12
  • 48
  • [Get cursor position (in characters) within a text Input field](https://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field) – Ouroborus Aug 19 '21 at 15:47
  • 2
    From a practical viewpoint, this may not be worth solving. Who edits a hidden password from anywhere but the end? – Ouroborus Aug 19 '21 at 15:51
  • I agree with @Ouroborus no one deletes a number from the middle of the password. Besides, it will return as wrong and the user will just type the password correct next time. –  Aug 19 '21 at 16:08
  • Notice that when add character before last character your hidden input value is not ok too – jiali Aug 19 '21 at 16:27
  • @ Ouroborus No .. this is not correct because imagine we have another show/hide functionality then user clicks on show password and tries to modify the password from everywhere he wants... – Sara Ree Aug 21 '21 at 17:06

1 Answers1

0

I have actually tried to make this possible, but some or the other way I missed one or two cases. Then I made it possible to some extent, and made it as an NPM package.

Please try this, and see if it works. It worked on my end.

npm install last-typed-letter-password

https://www.npmjs.com/package/last-typed-letter-password

Praveen Joshi
  • 11
  • 5