Question

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

try {
  window.parent.frames["id"].src = {url};
}
catch(er) {
  window.parent.frames["id"].location = {url};
}

Answer 1

这是你追求的吗？

我们在这里使用原生密码＆＃39;掩盖输入的类型。单击show文本框后，它只会将该输入转换为文本类型，这将显示该值。

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

Javascript Masking on press press of input

2 个答案: