Преобразование HTML ввод символов на звездочки по истечении определенного времени


Я попробовал для начала реализации функции, которая преобразует HTML ввод символов на звездочки по истечении определенного времени. Что вы думаете о моем подходе и как бы ты это сделал?

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>



748
3
задан 11 апреля 2018 в 05:04 Источник Поделиться
Комментарии