java - 如何在 Jsp 中屏蔽文本字段中的几个字符

Question

我想编写一个要求，我需要在 jsp 的文本字段中屏蔽几个字符。

例如:我的文本字段将接受 11 位数字作为输入。说12345678911

我需要在客户端显示 *****678911 但需要在服务器端传递 12345678911。

我知道我可以使用隐藏字段，我可以在其中存储未屏蔽的值并在 TextField 中显示屏蔽的值。

但是用户可以在输入全部后使用箭头键或鼠标编辑第二个字符，所以逻辑在这里失败。

下面是我的代码:

<SCRIPT LANGUAGE="Javascript"> 

var a = document.getElementById("hiddenText").value;

var val = document.getElementById("repeat").value;
function mask(str,textbox){
var  mask;  

        switch(str.length){

        case 1: 
            this.val = str;

            mask = "*";
            break;
        case 2:
            val = val + str.charAt(1);
            mask = "**";
            break;
        case 3:
            val = val + str.charAt(2);
            mask = "***";
            break;
        case 4:
            val = val + str.charAt(3);
            mask = "****";
            break;
        case 5:
            val = val + str.charAt(4);
            mask = "*****";
            break;
        case 6:
            val = val + str.charAt(5);
            mask = "*****" + val.substring(5,6);
            break;
        case 7:
            val = val + str.charAt(6);
            mask = "*****" + val.substring(5,7);
            break;
        case 8:
            val = val + str.charAt(7);
            mask = "*****"+ val.substring(5,8);
            break;
        case 9:
            val = val + str.charAt(8);
            mask = "*****"+ val.substring(5,9);
            break;
        case 10:
            val = val + str.charAt(9);
            mask = "*****"+ val.substring(5,10);
            break;
        case 11:
            val = val + str.charAt(10);
            mask = "*****"+ val.substring(5,11);
            break;
        default:

            break;
        }   


textbox.value = mask;
document.getElementById("repeat").value = val
if (document.getElementById("repeat").value.length > 11){
    var h = document.getElementById("repeat").value;
    h = h.substring(0,11);
    document.getElementById("repeat").value = h;
}
}
</SCRIPT>

如果用户一次性输入值，这会工作正常，但如果他通过使用箭头键或鼠标移动光标来修改输入的值，那么它将失败。

非常感谢您的帮助!

谢谢!

Answer 1

下载jquery.maskedinput.js从这里开始。

1. DOM 准备就绪时


$.mask.definitions['n'] = "[0-9]"; 现在 n 代表任何数字;`

然后输入以下内容

jQuery(函数($){jQuery(函数($){
$("yourINPUT").mask("nnnnn678911",{placeholder:"#"});
});

用现成的比发明轮子更省时；