Question

我试图将SSN字段中的所有数字掩盖到keyup上的*。我在这里得到了一个解决方案masking numbers to a special character (*) in input。但是我怎样才能获得真正的价值并将其存储在隐藏的领域中。如果数字在中间变化，则应相应更新。有没有办法实现这个目标？例如，如果我输入123，我应该更改为***，每个数字显示几秒钟。如果我删除或删除2并放置4，它应该给出隐藏值143. type = password不工作，因为数字应该在更改为*之前可见几秒钟。

Answer 1

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

很有用

实际上，我们会在您的服务器的隐藏元素中保留该值，并在您的用户界面中显示***。

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

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

SSN将数字屏蔽到密钥输入中的特殊字符（*）

1 个答案: