显示 8 个字符密码格式中的 3 个文本字符答案

【问题标题】：Showing 3 text character from a 8 character password format显示 8 个字符密码格式中的 3 个文本字符
【发布时间】：2016-12-15 09:11:09
【问题描述】：

功能：

用户使用 USB 扫描仪扫描 ID，获取 ID 号（8 个字符）并将值输入到<input type=password> 字段。但是，不是显示捕获的 ID 值的所有 8 个要点，而是只有 5 个字符是密码类型，其余 3 个字符是文本格式。

问题：

我尝试过在线搜索，但似乎找不到任何可能的建议或解决方案。我已将输入字段类型设置为密码，因此此时该字段中的所有值都是密码类型格式。

但是，我想要实现的是前 5 个字符遵循密码类型格式，而其余 3 个字符是文本类型格式。

我现在的成就：

........

我希望达到的目标：

.....12A

我想请求帮助或向我指出任何方向，以便我能够完成这项工作。

谢谢。

<input type="password" id= "NRICCodeField"  style="position:absolute; top:545px; left:690px; height:68px; width:545px; outline: 0; border: 0; font-size:70px; font-color:#765725; font-family:'Gothic'; background: transparent; z-index:100;" autofocus src="lib/image/transparent.png">

【问题讨论】：

您将无法使用密码字段。这将始终隐藏所有字符。您需要使用type="text" 我想自己实现隐藏
你愿意使用 JavaScript 吗？顺便说一句，你不能用input type="text"完全实现它
我看到的最简单的方法是让两个输入彼此相邻，一个密码和一个文本，当第一个有 5 个字符时跳转到第二个。为了让它看起来不错，您可以根据输入的字符数来改变输入的宽度。
我同意 Nicovank 的观点，您可能可以很好地设置两个字段的样式，使其看起来像一个字段。否则，正如 31piy 和 Liam 所说，您可以使用文本输入和 javascript 来获得您所追求的功能。
@31piy 是的，我可以使用 javascript。当然，因为如果input type = text，它将显示所有文本

标签： javascript jquery html

【解决方案1】：

我已经为您找到了一种方法，如果它适合您，您可以查看下面的代码。您需要一个代理隐藏字段，您应该在其中存储实际值，并且文本字段将仅显示供用户查看。提交表单时，您应该从隐藏字段而不是文本字段中选择数据。

<!DOCTYPE html>
<html class="not-ie" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>41160278</title>
<script type="text/javascript">
function applyFormat(self){

    var input = self.value;
    var firstPart = input.substr(0,4);
    var lastPart  = input.substr(5, input.length);

    formname.forShow.value = firstPart.replace(firstPart, '*****') + lastPart;

    formname.forStore.value = input;

}
</script>
</head>

<body>
<form action="#" name="formname">
    <fieldset>
        <input type="text" name="forShow" maxlength="8"    onchange="applyFormat(this)" value="" />
        <input type="hidden" name="forStore" value="" />
    </fieldset>
</form>
</body>
</html>

【讨论】：

【解决方案2】：

这可能会奏效：

$(document).ready(function(){
  // Edit these if you want to switch to another character
  // and/or the number of characters you want to hide
  var unicodeChar = "●", hideNChars = 5;

  // On text input, we turn the hidden characters into their real
  // values, save into data("passcode") and then re-hide the 'n'
  // first characters
  $('#userID').on('input', function(){
    var regex = new RegExp(unicodeChar, "g");
    for (var i = 0, v; match = regex.exec($(this).val()); i++) {
      v = $(this).val();
      $(this).val( v.substr(0, match['index']) + $(this).data("passcode")[i] + v.substr(match['index'] + 1) );
    }
    var value = $(this).val();
    $(this).data("passcode", value).val(Array(value.length <= hideNChars ? value.length + 1 : hideNChars + 1).join(unicodeChar) + value.substr(hideNChars));

    console.log($(this).data("passcode"));
  }).data("passcode", "");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" id="userID">

该值可在 $('#userID').data('passcode') 中检索，但如果需要，您可以将该数据存储在隐藏的输入中，或者在提交表单时简单地清除输入文本。

如果需要，可以轻松改进此代码并使其更加复杂。（例如，您可能需要知道用户试图删除/替换的隐藏字符是什么）

【讨论】：