Question

我正在设计一个HTML输入来接受电话号码（10位数）。我希望输入表单预先填写＆＃39; - ＆＃39; s。当用户输入数字时，＆＃39; - ＆＃39;应该被实际数字替换。同样，当用户删除号码时，应将其替换为＆＃39; - ＆＃39; s。

以下是我取得的成就：https://jsfiddle.net/f99obu18/2/。

Javascript代码（使用jQuery）：

$("form input").val("-".repeat(10));
$("form").on('keypress keydown', 'input', function(event) {
    // Replaces the "-" while user input.
    var index = this.selectionStart;
    if (event.keyCode >= 48 && event.keyCode <= 57) {
      $(this).val($(this).val().substring(0, index) + 
                  $(this).val().substring(index + 1, $(this).val().length));
      setCaretToPos(this, index);
    } 
    // Adds "-" at the current position for "Backspace."
    if (event.keyCode == 8 && index > 0) {
      $(this).val($(this).val().substring(0, index) + '-' +
                  $(this).val().substring(index, $(this).val().length));
      setCaretToPos(this, index);
    } 
    // Adds "-" at the current position for "Delete."
    if (event.keyCode == 46) {
      $(this).val($(this).val().substring(0, index) + '-' +
                  $(this).val().substring(index + 1, $(this).val().length));
      setCaretToPos(this, index);
      return false;
    }
});

（setCaretToPos方法取自jQuery Set Cursor Position in Text Area。）

问题：我的计算机上的解决方案看起来很不错，但在我的手机上无法正常工作。是否有用于此输入验证的标准的，可重复使用的代码（例如，jQuery插件）？

Answer 1

jQuery插件masked-input-plugin可能会有所帮助。

使用该插件，将代码更改为：

$("form input").mask("9999999999",{placeholder:"-"});

将HTML输入限制为固定长度的数字

1 个答案: