SSN 将数字屏蔽为 keyup 输入中的特殊字符 (*)

Question

我正在尝试将 SSN 字段中的所有数字屏蔽为 * on keyup。 我在这里得到了解决方案 masking numbers to a special character (*) in input 。但是我怎样才能获得真正的价值并将其存储在隐藏字段中。如果数字在中间发生变化，则应相应更新。有什么办法可以做到这一点？例如，如果我输入 123，我应该将每个数字更改为 *** 显示几秒钟。如果我删除或删除 2 并放置 4，它应该给出隐藏值 143。类型 = 密码不起作用，因为数字应该在几秒钟内可见，然后更改为 *。

Answer 1

Ras 我已经为你创建了一个代码。 这对 /[a-zA-Z0-9]/ 很有用。

实际上，我们为您的服务器保留 Hidden Element 中的值，并在您的 UI 中显示 ***。

这是一个演示，您可以根据需要进行自定义。

var arr = [];
function changeValue(event){
  var element = document.getElementById('password');
  var hiddenElement = document.getElementById('hiddenPass');
  var startPos = element.selectionStart;
  var endPos = element.selectionEnd;
  var isTrue = /[a-zA-Z0-9]/.test(element.value);
  // if [0-9] (for number) 
  if((isTrue || event.keyCode == 8)){
    // for deletion
    if(event.keyCode == 8){
      arr.splice(endPos,1);
      setStar(arr);
    }else{
        var val = element.value;
        var obj = {key:val[startPos-1], value:'*'};
        // perticular position insertion
        arr.splice(startPos-1, endPos-startPos, obj);
        setStar(arr);
    }
  }else{
    // for space controlling
    element.value = element.value.trim();
    return;  
  }
}

// star setting
function setStar(arr){
  var element = document.getElementById('password');
  var hiddenElement = document.getElementById('hiddenPass');
  var starText = "";
  var originalText = ""; 
  for(var i=0; i<arr.length; i++){
     starText += arr[i].value;
     originalText += arr[i].key;
  }
  element.value = starText;
  hiddenElement.value = originalText;
  console.log("HiddenElement", hiddenElement.value);
}

<input id="password" type="text" onkeyup="changeValue(event)">
<input id="hiddenPass" type="hidden">