[Malleys]

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>