Question

这实际上是我之前提出的问题的第2部分。我正在使用*隐藏SSN，因为用户输入了一些数字。我的问题是，当我提交表单时，该字段会以 * - - ****的形式返回。因此，我考虑创建一个名为filledSSN的属性，以便跟踪输入的内容。我的挑战是跟踪某些关键事件，如退格，删除或删除整个字段。当这些事件发生时，填充的SSN也需要重新创建。

这是一个jsfiddle链接：jsfiddle link

<script type="text/javascript">
 $(document).ready(function(){

   $('#ssn').keyup(function(e) { 

      var self = $(this);
      var val = self.val().replace(/[^\d\*]/g, '').replace(/\d/g,'*');
      var newVal = '';
      var tmpVal = '';
      var ssnParts = [3, 2, 4];
      var maxSize = 10;

      for (var i in ssnParts) {
        if (val.length > ssnParts[i]) {
          newVal += val.substr(0, ssnParts[i]) + '-';
          val = val.substr(ssnParts[i]);
        } else { 
          break; 
        }       
      }

      newVal += val;

      self.val(newVal);  


      console.log("newVal = " + newVal);
      console.log("whichy which ? " + e.which);

      if ( self.attr("filledSSN").length <= 8 ) {
          if ( e.keyCode !== 8 || e.keyCode !== 46 ) {  // backspace or delete
            tmpVal = self.attr("filledSSN") + String.fromCharCode(e.which).replace(/[^\d\*]/g, '');
          } else if ( self.val().length === 0 ) {
            tmpVal = '';
          } // else if ( e.keyCode === << handle other events gracefully >>
          self.attr("filledSSN", tmpVal);   
      }

      console.log("what is the filledSSN attr? = " + self.attr("filledSSN"));
  }); 

});
</script>

<input type="text" class="form-control" id="ssn" placeholder="ssn" filledSSN="" maxlength="11">

Answer 1

我最终选择了一条略有不同的路线。它不是最干净但它现在有效。我仍然希望我可以用键盘上的星号替换数字，但我无法跟踪退格，鼠标突出显示和删除部分输入等事件或删除全部。

希望对某人有所帮助。

$('#ssn').keyup(function(e) { 

      var self = $(this);
      var val = self.val().replace(/[^\d\*]/g, '');
      var newVal = '';
      var ssnParts = [3, 2, 4];
      var maxSize = 10;

      for (var i in ssnParts) {
        if (val.length > ssnParts[i]) {
          newVal += val.substr(0, ssnParts[i]) + '-';
          val = val.substr(ssnParts[i]);
        } else { 
          break; 
        }       
      }

      newVal += val;

      self.val(newVal);  
      self.attr("filledSSN", newVal);   

      console.log("newVal = " + newVal);
  });

  $('#ssn').blur(function() {

      var self = $(this);
      var val = self.val().replace(/[^\d\*]/g, '').replace(/\d/g,'*');
      var newVal = '';
      var tmpVal = '';
      var ssnParts = [3, 2, 4];
      var maxSize = 10;

      for (var i in ssnParts) {
        if (val.length > ssnParts[i]) {
          newVal += val.substr(0, ssnParts[i]) + '-';
          val = val.substr(ssnParts[i]);
        } else { 
          break; 
        }       
      }

      newVal += val;

      self.val(newVal);  

  }); 


  $('#ssn, #reenterSSN').on('focus', function() {

      $(this).val($(this).attr('filledSSN'));
  });

使用星号隐藏字段并使用原始值设置输入属性

1 个答案: