按下輸入時的Javascript Masking

Question

我正在為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;
        }
    });
}

Answer 1

這是你所追求的嗎？

在這里，我們使用掩蓋輸入的本機“密碼”類型。 單擊顯示文本框后，它將簡單地將該輸入轉換為將顯示該值的文本類型。

https://jsfiddle.net/zoo67k86/

的HTML

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

JS

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

Answer 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>

JS

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');
    }
  });
}