在我无法控制的表格上掩盖部分字段

Question

我有一个我无法控制的表单，但我可以将CSS和JS添加到它所在的页面。该表格特别包含社交领域。表格并不隐藏社交。我想过只是简单地将输入类型从文本更改为密码，但是有一个请求显示最后4个，甚至是在输入时显示字符但是后面是掩码。

我已经有了可以屏蔽我想要的代码，但如果它全部通过JS完成，它在技术上打破了表单输入，因为它将值从值更改为*或者不是。我怎样才能预先设定价值但同时掩盖价值。我开始追加它的路径，但输入最终会被*值损坏。

下面的代码具有我想要的可视功能，但现在我需要以某种方式保留字段的值。我所做的是创建一个辅助字段，目的是显示遮罩，同时将真实值放在幕后实际使用的字段中。

var social = document.querySelector('#ctl00_mainContent_ApplicationForm_ApplicationForm_ApplicationFormControl_datatel_ssn_datatel_ssn');
            var socialVal = social.value;
            if(social !== null){
                var newSocial = document.createElement('input');
                newSocial.type = "text";
                newSocial.maxLength = 11;
                newSocial.value = social.value;
                social.parentNode.insertBefore(newSocial, social.nextSibling);
                //social.style.display = 'none';
                newSocial.addEventListener('keyup',function(e){
                    var newVal = newSocial.value.replace(/-/gi,'');
                    var maskVal = newVal;
                    social.value = maskVal;
                    if(maskVal.length < 6){
                        maskVal = maskVal.replace(/\d/g,'*');
                    }
                    newSocial.value = maskVal;
                },false);
            }