输入按键时的Javascript掩码答案

【问题标题】：Javascript Masking on key press of input输入按键时的Javascript掩码
【发布时间】：2016-06-16 04:01:59
【问题描述】：

我正在为 ssn 开发自定义屏蔽输入文本框。当用户在那里输入 SSN 时，我将值保存在全局变量中。如果他们单击值被屏蔽的跨度，我在文本框旁边有一个跨度。前 555-55-5555 至 xxx-xx-5555。现在我希望用户能够编辑此状态的值，例如 22x-xx-5555，我希望它保存框 225-55-5555 的当前值。有什么建议么？现在我正在传递实际值 var 转换 555-55-5555 并将其转换为数组并捕获新值 var currentValue 的按键也将其转换为数组。在我有一个 if 语句比较长度后，意味着改变了值。不知道之后该怎么办。

currentMask(realValue) {
    var self = this;
    self.element.addEventListener('keyup', e => {
        if (self.element.getAttribute('type') === 'ssn') {
            var keycode = (e.which) ? e.which : e.keyCode;
            if ((keycode >= 48 && keycode <= 57) || keycode === 8 || keycode === 8 || keycode === 9 || keycode === 37 || keycode === 39) {
                var conversion = realValue.split("");
                var currentValue = self.element.value.split("");
                if (conversion.length === currentValue.length) {
                    var finale = conversion.concat(currentValue);
                }
                return true;
            }
            e.preventDefault();
            return false;
        }
    });
}

【问题讨论】：

我没有关注你为什么将它存储在其他地方。我认为这会降低安全性，因为您现在有 2 个副本。你只是想掩盖一个文本框吗？ <input type="password" /> 将为您屏蔽一个文本框

标签： javascript lodash

【解决方案1】：

这就是你所追求的吗？

这里我们使用了隐藏输入的本机“密码”类型。单击显示文本框后，它会简单地将输入转换为显示值的文本类型。

https://jsfiddle.net/zoo67k86/

HTML

<input id="ssn" type="password" placeholder="ssn">
Show: <input id="show" type="checkbox">

document.getElementById('show').addEventListener('click', function(e){
    if(e.target.checked){
    document.getElementById('ssn').setAttribute('type', 'text');
  } else{
    document.getElementById('ssn').setAttribute('type', 'password');
  }
});

【讨论】：

感谢您的评论，但前提是有办法屏蔽前 7 个字符并始终显示后 4 个字符

【解决方案2】：

或者，您可以有四个输入框并检测模糊事件以将之前的输入框设置为密码类型。

https://jsfiddle.net/zoo67k86/1/

HTML

<div id="ssn">
  <input id="ssn1" data-order="1" maxlength="4">
  <input id="ssn2" data-order="2" maxlength="4">
  <input id="ssn3" data-order="3" maxlength="4">
  <input id="ssn4" data-order="4" maxlength="4">
</div>

var ssns = document.getElementsByTagName('input');

for(var i = 0; i < ssns.length; i++){
    ssns[i].addEventListener('blur', function hideEarlierSibling(e){
    var earlierInput = e.target.previousElementSibling;
    if(earlierInput){
        earlierInput.setAttribute('type', 'password');
    }
  });
}

【讨论】：