HTML5 создает поле, которое скрывает текст, но может быть скопировано / вставлено - PullRequest
Новая
       21

HTML5 создает поле, которое скрывает текст, но может быть скопировано / вставлено

1 голос
/ 22 октября 2019

Я хотел бы добавить поле в мое приложение HTML5, в котором я могу писать пароли, и при сохранении пароль будет маскироваться с помощью ****. Так что при доступе к странице вместе с клиентом он не видит пароль, но мне нужно иметь возможность его скопировать. Поэтому кнопка «Показать PW» для копирования не будет работать.

Есть ли способ сделать это? К сожалению, я ничего не нашел.

Ответы [ 3 ]

4 голосов
/ 22 октября 2019

Что вы можете сделать, это сделать функцию нажатия на кнопку, и 

<!-- The text field -->
<!- The value passed is for just testing user will enter the password -->
<input type="password" value="Hello World" id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

MyFunction () будет тогда 

function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /*For mobile devices*/

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}

Ссылка: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

Надеюсь, это поможет.

1 голос
/ 22 октября 2019

Rattic реализует эту функцию, используя свойство text-shadow css.

Создайте класс css следующим образом: 

text-shadow: 0 0 10px #000000;

Если вы хотите скрыть пароль, добавьте этот класс. Добавьте кнопку, чтобы скопировать содержимое из поля.

Результат будет примерно таким:

screenshot; result

Это может немного отличаться от того, что вы пытаетесьреализовать, но имеет ту же идею, чтобы скрыть пароль и дать возможность его скопировать.

Если вы хотите использовать * вместо тени текста, я думаю, вам нужно сделать поле управляющим компонентом, сохранитьпароль, но показать * в соответствии с длиной пароля.

Это будет выглядеть так: 

password = input 
display = strings.repeat('*', password.length);

Пароль можно получить только с помощью кнопки, и вы отобразите * в поле. Это требует некоторых знаний о состоянии компонентов. Вы можете выбрать тот, который вы предпочитаете.

0 голосов
/ 22 октября 2019

Просто создайте кнопку со свойством data-pass и скрытым вводом css. Затем, как объяснено здесь , скопируйте текст из созданного ввода в буфер обмена.

...