使用 Javascript 替换/屏蔽文本框字段中特定位置的文本

Question

使用 Java 脚本输入下一个字符后，如何将文本框中输入的文本替换为*？

我正在为该文本框使用inputSecret标签，但在我键入时它会立即隐藏整个内容。

这就是我现在正在做的事情：(这是错误的。我们可以调整这个输入秘密标签吗？

<h:inputSecret maxlength="6" value="#{userBean.field}" />  

要求：

• 它应该采用托管 Bean 属性中的实际值，但掩码 它仅在 UI 中具有"*"。
• 它应该在特定位置屏蔽文本。例如，前 2 个字符和后 2 个字符被屏蔽，但中间 2 个字符显示为**34**
• 它应该只从我输入第二个字符的那一刻开始屏蔽。假设这是我123456输入的值。
  • 第一步：1
  • 第二步：*2
  • 第三步：**3
  • 第四步：**34(因为第 3 和第 4 个字符不应该被屏蔽(
  • 第五步：**345
  • 第六步：**34*6
  • 第七步：**34**(当我完成输入此文本框时(

关于如何做到这一点的任何线索？

PS：此字段可以是字母数字。我只是使用数值作为示例。

Answer 1

如果我们闭上眼睛，忽略安全问题，有一种方法可以只用JavaScript来做到这一点。

想法

基本思想取自这个公认的答案。知道<h:inputSecret ../>实际上是渲染为<input type="password".../>，我们可以使用以下 java 脚本对其进行操作：

• 当页面在浏览器中准备就绪时，创建具有与原始name属性相同的隐藏input，以便 JSF 看不到任何差异，
• 将原始input的类型从密码更改为文本，
使用
• Java 脚本截获类型化的字符，并使用原始字段进行 UI 呈现，使用隐藏字段保存将提交给后备 Bean
的值

实现

.xhtml

<h:form class="form">
<h:inputSecret maxlength="6" value="#{userBean.field}" class="pass"/>
</h:form>

javascript (使用 jQuery library(

//creating mask from real value according to required steps
function createMask(value) {
var mask = "";
var valueLen = value.length;
if (valueLen === 1) {
mask = value;
} else if (valueLen === 2) {
mask = "*" + value.substring(1, 2);
} else if (valueLen === 3) {
mask = "**" + value.substring(2, 3);
} else if (valueLen === 4) {
mask = "**" + value.substring(2, 4);
} else if (valueLen === 5) {
mask = "**" + value.substring(2, 5);
} else if (valueLen === 6) {
mask = "**" + value.substring(2, 4) + "**";
}
//if maxLength>6 then add more else ifs
return mask;
}
$(document).ready(function () {
var timer = "";
//add hidden field to hold actual typed value
$(".form").append($('<input type="hidden" class="hidpassw" />'));
//give hidden field the same name as original
$(".hidpassw").attr("name", $(".pass").attr("name"));
//change original type from password to text and remove name property
$(".pass").attr("type", "text").removeAttr("name");
//get maxlength attr value of original field
var maxLength = parseInt($(".pass").attr("maxlength"));
//alphanumeric chars are added to value
$("body").on("keypress", ".pass", function (e) {
var code = e.which;
var length = $(".hidpassw").val().length;
//modify regex if it doesnt fit your 'alphanumeric' definition
if (/^[a-zA-Z0-9]$/i.test(String.fromCharCode(code))) {
//check if maxLength is not reached
if (length < maxLength) {
//if length is less them maxLength then add typed alphanumeric char to hidden value
var character = String.fromCharCode(code);
$(".hidpassw").val($(".hidpassw").val() + character);
}
}
});
//special case for backspace
$("body").on("keydown", ".pass", function (e) {
var code = e.which;
var length = $(".hidpassw").val().length;
if (code === 8) {
e.preventDefault();
if (length > 0) {
clearTimeout(timer);
$(".hidpassw").val($(".hidpassw").val().substring(0, length - 1));
$(".pass").val(createMask($(".hidpassw").val()));
}
}
});

$("body").on("keyup", ".pass", function (e) {
var length = $(".hidpassw").val().length;
if (length <= maxLength) {
clearTimeout(timer);
//show last typed char for 100ms and then mask it
timer = setTimeout(function () {
$(".pass").val(createMask($(".hidpassw").val()));
}, 100);
}
});
});