HTML5 创建隐藏文本的字段，但可以 copy/pasted

Question

我想在我的 HTML5 应用程序中添加一个字段，我可以在其中写入密码，保存后，密码将被 **** 屏蔽。这样和客户一起访问页面时，他看不到密码，但我需要能够复制它。所以一个 "Show PW" 按钮来复制它是行不通的。

有办法吗？遗憾的是我没有找到任何东西。

Answer 1

你可以做的是在按钮上创建一个 onclick 函数

<!-- 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

希望对您有所帮助。

Answer 2

只需使用数据传递属性创建按钮并通过 css 输入隐藏。然后，按照说明here 将创建的输入中的文本复制到剪贴板。

Answer 3

Rattic使用text-shadow实现了这个功能css 属性.

像这样创建一个 css class：

text-shadow: 0 0 10px #000000;

当你想隐藏密码时，添加这个class。添加按钮以复制字段中的内容。

结果会是这样的：

它可能与您尝试实现的有点不同，但隐藏密码并提供复制它的能力是相同的。

如果你想用*代替text-shadow，我觉得你需要把字段做成一个控件组件，保存密码但是根据密码的长度显示*。

它将像：

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

密码只能通过按钮访问，并且您在字段中显示*。这需要一些关于组件状态的知识。你可以选择你喜欢的。

HTML5 创建隐藏文本的字段，但可以 copy/pasted

HTML5 create field which hides the Text, but can be copy/pasted

html

password-protection