Question

所以我试图将美国SSN作为输入并试图通过自动插入短划线来掩盖它，不允许超过9位等等。

请参阅Fiddle。

我的代码问题是：

我已经禁用了箭头键，这是因为如果有人使用箭头键返回并按退格键（对特定号码进行编辑），我的代码会中断，并且会插入额外的破折号，这是不可接受的。

我的代码如下：

$('#ssn').on("keyup change paste mouseup", function(evt) {
    setTimeout(function() {

        var $ssn = $('#ssn');
        var $length = $ssn.val().length;
        var $value = $ssn.val();

        $ssn.val(formatSSN($value));
    }, 10);

});

// Start of section that prevents arrow keys       
$('#ssn').on("click focus", function(evt) {
    var value = $(this).val();
    $(this).val('').val(value);
});

$('#ssn').on("keydown", function(evt) {

    var key = evt.keyCode;
    if (key >= 37 && key <= 40) {

        $(this).focus();
        var value = $(this).val();
        $(this).val(' ').val(value);
        evt.stopPropagation();
        return false;
    }
});

// End of section that prevents arrow keys

function formatSSN(inputSSN) {
    var dashPositions = [3, 6];
    var inputLength = inputSSN.length;
    var output = inputSSN;
    for (i in dashPositions) {


        if (dashPositions[i] < inputLength) {
            if (output[dashPositions[i]] !== '-') {
                var firstPart = output.substring(0, dashPositions[i]) + '-';
                var secondPart = output.substring(dashPositions[i]);
                output = firstPart + secondPart;
            }
        }

    }
    if (output.length > 11) {
        output = output.substring(0, 11);
    }
    return output;
}

我的问题是：

有什么办法可以启用箭头键，还能保留破折号的位置吗？（防止额外/错位的破折号）？

感谢。

Answer 1

您可以将input事件，.prop()，replace()与RegExp /./g一起使用，在输入原始值之前将输入存储在变量中;使用.test() RegExp /\D/删除不是数字的字符值;使用maxlength属性设置input值的最大长度;

var res = "";

$(".social").on("input", function(e) {
  // current value
  var val = e.target.value.slice(-1);
  // if `val` contains only digit characters
  if (!/\D/.test(val)) {
    res += val;
    console.log(res);
  }
  // remove characters that are not digits from displayed `-`
  if (/\D/.test(val)) {
    e.target.value = e.target.value.slice(0, -1)
  }

  $(this).prop("value", function(i, prop) {
    // set number of characters to mask with `"-"`
    if (prop.length < 7) {
      return prop.replace(/./g, "-")
    }
  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="social" maxlength="9" />

Answer 2

您可以使用隐藏字段来存储实际值。然后，当用户将值键入可见字段时，您可以使用JQuery捕获击键并显示“*”或其他一些字符，然后将捕获的字符附加到隐藏字段。有些图书馆可以更简单地做到这一点，但这种方法很好......不是很好但是很有效。

jQuery中的掩码输入 - 不使用库

2 个答案: