Javascript-форум - Заменить символы на звездочки

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Заменить символы на звездочки (https://javascript.ru/forum/dom-window/36099-zamenit-simvoly-na-zvezdochki.html)

Заменить символы на звездочки

Здравствуйте. Как можно заменить вводимые символы в input type="text" на звездочки? Тип пароль не подходит.
Заранее спасибо)

input.value = input.value.replace(/[\s\S]/g, "*") ;

Здравствуйте. Я совсем не разбираюсь в ява скриптах, поэтому мне не понятна строчка написанная выше Hekumok. Но мне очень нужен такой скрипт для замены символов на звездочки. Подскажите, пожалуйста, полный код для вставки на страницу с формой.

<input type="password">

LinaInverse,
спасибо за ответ, но не получается - я пробовал вставлять этот код перед формой, а также вот в таком виде:
<script type="text/javascript">
[].forEach.call(document.querySelectorAll("input"), function(input){
input.oninput = function(){
input.value = input.value.replace(/./gm, "*");
};
});
</script>
Но не работает. Что я делаю не так?

j0hnik,
type="password" не подходит - любой браузер начинает ругаться, что сайт не защищен, вводить пароль опасно и т.д. и т.п.

получите бесплатный SSL сертификат "Letsencrypt" и забудьте о проблеме на 3 мес. займет 10-15 минут.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text">
	<script>
		[].forEach.call(document.querySelectorAll("input"), function(input){
			input.oninput = function(){
				input.value = input.value.replace(/./gm, "*");
			};
		});
	</script>
</body>
</html>

так она будет менять на звезды символы и затрет настоящий пароль :write:

LinaInverse,
Спасибо, все получилось.

j0hnik,
Спасибо, попробую с этим разобраться.

Цитата:

Сообщение от LinaInverse (Сообщение 466102)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text">
	<script>
		[].forEach.call(document.querySelectorAll("input"), function(input){
			input.oninput = function(){
				input.value = input.value.replace(/./gm, "*");
			};
		});
	</script>
</body>
</html>

так она будет менять на звезды символы и затрет настоящий пароль :write:

Подскажите пожалуйста как тюнингануть данный скрипт.
Надо чтобы он не все символы закрывал, а только первые 4.
Буду рад любой информации. Спасибо!

input.value = input.value.replace(/^.{4}/, "****");

Цитата:

Сообщение от sektorgena

Надо чтобы он не все символы закрывал, а только первые 4.

Цитата:

Сообщение от LinaInverse

.replace(/./gm, "*");

Заменить более сложным вариантом...

var val='012345678';
alert(val.replace(/^.{1,4}/,function(Str){
	return Str.replace(/./g,'*');
}));

Цитата:

Сообщение от 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>

Цитата:

Сообщение от Malleys

почему я удаляю имя?

чтоб не было дубля в отправке на сервер информации?

рони, да! Значение со «звёздочками» ни к нему на сервере, это только для представления!