3
\$\begingroup\$

I tried for fun implementing a function that converts HTML input characters to asterisks after a given time. What do you think about my approach and how would you do it?

const passwordEl = document.querySelector('#password');
const showPassEl = document.querySelector('#show-password');

const replaceAt = (string, index, replace) => {
  return string.slice(0, index) + replace + string.slice(index + 1);
}

const insertAt = (string, index, insert) => {
  return string.slice(0, index) + insert + string.slice(index);
}

const removeAt = (string, index) => {
  let strArr = string.split('');
  strArr.splice(index, 1);
  return strArr.join('');
}

let plainPass = '';
passwordEl.addEventListener('input', e => {
  const valueLen = passwordEl.value.length;
  if (e.inputType === 'deleteContentBackward') {
    plainPass = removeAt(plainPass, e.target.selectionStart);
  } else {
    plainPass = insertAt(plainPass, e.target.selectionStart - 1, e.data);
    if (showPassEl.checked) {
    	passwordEl.value = plainPass;
    	return;
    }
    // immediately convert previous character to * if user typed fast
    if (valueLen > 1 && passwordEl.value[valueLen - 2] !== '*') {
      passwordEl.value = replaceAt(passwordEl.value, valueLen - 2, '*');
    }
    setTimeout(() => {
      passwordEl.value = replaceAt(passwordEl.value, e.target.selectionStart - 1, '*');
    }, 500);
  }
});

showPassEl.addEventListener('click', () => {
  passwordEl.value = showPassEl.checked ? plainPass : '*'.repeat(passwordEl.value.length);
});
<input type="text" id="password">
<input type="checkbox" id="show-password">
<label for="show-password">show password</label>

\$\endgroup\$
10
  • \$\begingroup\$ i typed in conteent, pressed left arrow twice, backspace and then show password gave me: conteen :) \$\endgroup\$
    – hjpotter92
    Commented Apr 11, 2018 at 6:06
  • \$\begingroup\$ Same issue if you tried to add characters in the middle, it will be added to the end haha ... I for some reason assumed that the user will always delete or add characters to the end. I'll try to fix that. Thanks for pointing out! \$\endgroup\$
    – Mark Adel
    Commented Apr 11, 2018 at 6:13
  • \$\begingroup\$ I fixed it. There are still some cases that are not handled though. \$\endgroup\$
    – Mark Adel
    Commented Apr 11, 2018 at 7:30
  • \$\begingroup\$ The show passowrd checkbox is not respected if I enable it and type the password \$\endgroup\$
    – hjpotter92
    Commented Apr 11, 2018 at 7:46
  • 1
    \$\begingroup\$ It still doesn't support most things you can normally do in a text input. You can't mark text and delete it, or ctrl+backspace to delete a word. You can't paste, cut, or drag and drop text. The delete key doesn't work. \$\endgroup\$
    – Kruga
    Commented Apr 11, 2018 at 15:03

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.