Сообщение от laimas
|
input.value = input.value.replace(/^.{4}/, "****");
|
И как получить само значение? Как скопировать? Как работать с таким значением?
Я думаю, что вы не хотите записать в базу данных «звёздочки»... Вы хотите, чтобы обычное значение выглядело так, чтобы первые четыре символа были представлены при помощи «звёздочек»!
<input class="my-secret-field">
<style>
input.my-secret-field:not(.mirror) {
position: absolute;
background: transparent;
border-color: transparent;
color: transparent;
caret-color: black;
}
input.my-secret-field:not(.mirror)::selection {
color: transparent;
background: rgba(33, 150, 243, 0.25);
}
input.my-secret-field.mirror {
pointer-events: none;
}
input.my-secret-field {
-webkit-appearance: none;
font-family: monospace;
}
</style>
<script>
function inputHandler(input, mirror) {
return function() {
mirror.value = input.value.replace(/^.{1,4}/,
match => "•".repeat(match.length)
);
};
}
for(const input of document.querySelectorAll("input.my-secret-field")) {
const mirror = input.cloneNode(true);
const handler = inputHandler(input, mirror);
mirror.classList.add("mirror");
mirror.removeAttribute("name"); // рони, laimas, почему я удаляю имя?
input.after(mirror);
input.addEventListener("input", handler);
handler();
}
</script>