如何在Jsp中的Textfield中掩盖少量字符

时间:2015-03-12 10:57:35

标签: java javascript jsp java-ee servlets

我想编写一个需求,我需要在jsp中的Text FIeld中掩盖几个字符。

对于Ex:我的Textfield将接受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>

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

非常感谢您的帮助!

谢谢!

1 个答案:

答案 0 :(得分:1)

从此处下载jquery.maskedinput.js

  1. 当DOM准备就绪时
  2. $.mask.definitions['n'] = "[0-9]";现在n代表任何数字;`

    然后输入以下内容

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

    使用现成的东西比发明轮子更安全;