input框前四位展示, 后面*隐藏, 点击按钮可来回切换

首先来说明一下需求

下面展示代码

<input type="text" id="inp" />
<button id="btn">点击</button>

jquery代码

<script>
        var trueVal = ""; // 可展示的value值
        var newVal = ""; // 需隐藏的value值
        var flag = false; // 判断是否展示, false为隐藏, true为展示
        $("#inp").bind("input propertychange", function(e) {
            var val = $("#inp").val();
            trueVal += e.originalEvent.data;
            if(val?.length >= 5) {
                newVal = val.slice(0, val.length - 1) + "*";
                $("#inp").val(newVal);
            }
        })
        $("#btn").click(function() {
            if(flag == false) { // 如果点击的时候开关还是隐藏状态
                $("#inp").val(trueVal); // 赋值需要展示的值
                flag = true; // 再把开关打开
            }else { // 如果需要隐藏的时候, 开关还是展示状态
                $("#inp").val(newVal); // 赋值需要隐藏的值
                flag = false; // 开关关闭
            }
        })
</script>

这里主要用到了jquery的bind()事件, 以及propertychange监听方法, 还有jquery的originalEvent对象.

如果对你有帮助, 请动动你的小手, 点个赞哦