Question

我有简单的代码，用'*'替换字符串中的字符，只显示字符串的最后4个字符。例如：

string = 424242424242

应该成为：

********4242

执行此操作的代码是：

var str = $('.cc').val();

var trailingCharsIntactCount = 4;
str = new Array(str.length - trailingCharsIntactCount + 1).join('*') + str.slice( -trailingCharsIntactCount);

$('.cc').val(str);

现在，当用户专注于输入字段时，我需要反转它。这是一个工作小提琴：

https://jsfiddle.net/s66k9x1s/1/

基本上，我需要以我在小提琴中演示的方式显示/隐藏输入值。

有人可以就如何实现这一目标提出建议吗？

Answer 1

更换字符串不能从空气中逆转，你需要在某处保存原始值。例如，您可以使用jQuery的.data()。将原始值存储为.data('value', str)，当场地得到焦点时，从.data('value')恢复。

function getMaskedValue(str) {
  var trailingCharsIntactCount = 4;
  return new Array(str.length - trailingCharsIntactCount + 1).join('*') + str.slice(-trailingCharsIntactCount);
}

var $cc = $('.cc');
var str = $cc.val();
$cc.data('value', str);

$cc
  .val(getMaskedValue(str));
  .focus(function() {
    $(this).val($(this).data('value'));
  });

正如@aaron指出的那样，焦点丢失后，您还想恢复蒙版值：

$cc
  .focus(function() {
    $(this).val($(this).data('value'));
  })
  .blur(function() {
    str = $(this).val();
    $(this).data('value', str);
    $(this).val(getMaskedValue(str));
  });

他也是对的，你不需要.data()，您可以将实际值存储在变量中。将它隐藏在封闭内是很好的。（See fiddle.）

(function() {
  function getMaskedValue(s) {
    var masklen = s.length - 4;
    return s.substr(0, masklen).replace(/./g, '*') + s.substr(masklen);
  }

  var $cc = $('.cc');
  var value = $cc.val();

  $cc
    .val(getMaskedValue(value))
    .focus(function() {
      $(this).val(value);
    })
    .blur(function() {
      value = $(this).val();
      $(this).val(getMaskedValue(value));
    });
})();

我还简化了计算掩码值的实现，哪个应该表现更好，消除阵列操作。

Answer 2

将原始值保留在str中。这是一个简洁明了的答案，其中包括重新隐藏blur：

var cc = $('.cc');
var str;
var trailingCharsIntactCount = 4;

function getHiddenValue() {
  str = cc.val();
  return new Array(str.length - trailingCharsIntactCount + 1).join('*') + str.slice(-trailingCharsIntactCount);
}

cc.val(getHiddenValue());
cc.focus(function() { cc.val(str); });
cc.blur(function() { cc.val(getHiddenValue()); });

jQuery：反向字符串切片功能？

2 个答案: