使用Javascript

Question

如何在使用Java Script输入下一个字符后用 * 替换文本框中输入的文字？

我在该文本框中使用 inputSecret 标记，但在我输入时会立即隐藏整个内容。

这就是我现在正在做的事情:(这是错误的。我们可以调整这个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** （当我输入此textBox时）

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

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

Answer 1

如果我们闭上眼睛而无视安全问题，则有一种方法只能使用JavaScript。

想法

基本思想来自此accepted answer。知道<h:inputSecret ../>实际上是呈现为<input type="password".../>的，我们可以使用Java脚本通过以下方式对其进行操作：

• 在浏览器中准备好页面后，请创建具有与原始属性相同的input属性的隐藏name，以使JSF看不到任何区别，
将原input的类型 从密码更改为 text ，
• 使用Java脚本截获键入的字符，并使用UI渲染的原始字段和用于保存将提交给后备bean的值的隐藏字段

实施

xhtml

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

javascript（使用jQuery库）

//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);
        }
    });
});