set password as a variable while typing

Question

Trying to avoid any browser's stuff about autocomplete, password suggestion etc.

And at the same time keep the show/hide letters functionality.

The idea is to keep password as a variable, regardless of show/hide state.

In the code below problem is if user press Backspace or Delete key. In that case the whole concept crushes down.

Any help?

var pass = "";

$('#inpass').on('input', function(){
 if(!$('#checka').is(':checked')){
  let a = $(this).val();
  let b = a.substr(-1);
  pass += b;
  let c = a.replace(/.$/, '*');
  $(this).val(c);
  console.log(pass);
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='text' id='inpass' maxlength='25' placeholder='password' title='password' autocomplete='off'>
<br><br>
<input type='checkbox' id='checka'>
<label for='checka' id='labela'>show letters</label>

The whole concept also fails if the user uses arrow keys to change a previous character, not just the last one. — Taplar, Nov 28 '18 at 18:03
Ref. https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tag — Taplar, Nov 28 '18 at 18:07
@Taplar, you're right about the arrow key. And you link - it is asked (and answered) in 2008, accepted answer edited in 2015. — , Nov 28 '18 at 18:10
didn't get your point why don't you just use **type="password"** — Sameer, Nov 28 '18 at 18:10
Are you suggesting that because of the age of the answers they are no longer relevant? — Taplar, Nov 28 '18 at 18:10
So you've tried the answers and seen that they no longer work? — Taplar, Nov 28 '18 at 18:12
Not at all clear what higher level problem you are really trying to solve here. Seems like a science experiment gone bad. Once you change the value what about when it needs to be submitted? — charlietfl, Nov 28 '18 at 18:15
@Taplar, in fact, I see now, I tried that solution, and didn't work. At least in Chrome — , Nov 28 '18 at 18:15
@SameerAhmad epascarello he's using text to avoid the auto fill I assume. — Taplar, Nov 28 '18 at 18:15
@puerto there are multiple solutions on that page. one including to randomize the password field name. did you try that solution? — Taplar, Nov 28 '18 at 18:16
@SameerAhmad, as Taplar said - to avoid `autofill` AND `password suggestion` from the browser's side. — , Nov 28 '18 at 18:16
You might could also potentially leave the name off of the field until you submit, and add the name to it before the submit goes through. If the autofill relies on it being a password field with a name, that could also potentially bypass the autofill. But that's speculation that would need to be tested. — Taplar, Nov 28 '18 at 18:20
If it works, it is a real solution. As your question currently stands it is too broad. As have been mentioned in the comments, there are multiple issues with your code. — Taplar, Nov 28 '18 at 18:27

Amstel D'Almeida · Accepted Answer · 2018-11-29T05:16:57.783

Added checks if it is delete or add

var pass = "";
String.prototype.replaceAt = function (index, replacement) {
    return this.substr(0, index) + replacement + this.substr(index + replacement.length);
}

function setCaretPosition(ctrl, pos) {
    if (ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(pos, pos);
    } else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

$('#inpass').on('input', function(){
 var el = document.getElementById('inpass');
    let caretStart = el.selectionStart;

    let a = $(this).val();
    var deleteLength = pass.length - a.length;
    var addLength = deleteLength * -1;
    let b = a.substr(caretStart - addLength, addLength);
    if (deleteLength > 0) {
        pass = pass.substr(0, caretStart) + pass.substr(caretStart + deleteLength, pass.length - 1);
    } else {
        if (caretStart < a.length) {
            pass = pass.substr(0, caretStart - addLength) + b + pass.substr(caretStart - addLength);
        } else {
            pass += b;
        }
    }
    if (!$('#checka').is(':checked')) {
        if (a != "" && addLength > 0) {
            let c = a.replaceAt(caretStart - addLength, '*'.repeat(addLength));
            $(this).val(c);
        }

    }
    setCaretPosition(el, caretStart);
    console.log(pass);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='text' id='inpass' maxlength='25' placeholder='password' title='password' autocomplete='off'>
<br><br>
<input type='checkbox' id='checka'>
<label for='checka' id='labela'>show letters</label>

Does strange things when ticking the 'show letters' checkbox and when using cursor keys — freedomn-m, Nov 28 '18 at 19:10
@Amstel, almost perfectly, do you have any solution for the case in `freedomn's` notice? — , Nov 28 '18 at 19:18
@puerto I have updated the code to address freedom-m comments — Amstel D'Almeida, Nov 29 '18 at 01:41

set password as a variable while typing

1 Answers1