在jQuery中屏蔽输入 - 不使用库

Mask input in jQuery - without using a library

本文关键字：输入 jQuery 屏蔽      更新时间：2023-09-26

所以我试图将美国 SSN 作为输入，并试图通过自动插入破折号、不允许超过 9 位数字等来掩盖它。

请看小提琴。

我对代码的问题是：

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

我的代码如下所示：

$('#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;
}

我的问题是：

有什么方法可以启用箭头键，同时仍保留破折号的位置？（防止额外/错位的破折号） ？

谢谢。

您可以使用input事件、.prop() 、 replace() 与 RegExp /./g 一起使用，在替换原始值之前将输入存储在变量中; 使用带有RegExp /'D/ .test()从值中删除非数字字符; 使用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" />

您可以使用隐藏字段来存储实际值。 然后，当用户在可见字段中键入值时，您可以使用 JQuery 捕获击键并显示"*"或其他字符，然后将捕获的字符附加到隐藏字段。 有些库可以更轻松地执行此操作，但这工作正常......不是优雅的，但有效。

相关文章：