如何为包含空格的输入添加 pattern='\d*'？

Question

我有一些输入形式，从视觉上看只接受数字，例如输入“薪水”或“电话号码”。但是，我想添加某种输入掩码并对这些输入进行格式化。

例如对于“salary”输入，如果用户输入了 4 个数字，我希望值看起来像这样 9 999 或者如果用户输入像这样 99 999 5 个数字。

但同时我希望这些输入有一个 pattern='\d'* 以便用户“打开”带有数字的键盘仅当用户触摸来自智能手机的输入时。

如果我这样做，它不允许我提交表单，即使我在提交前修剪了所有空格，它仍然说“请匹配请求的格式”。

问题：是否有任何解决方法可以实现我的需要？

这是一个带有示例的代码框，请从智能手机打开以查看我想“显示”给用户的“键盘”。

https://codesandbox.io/s/masked-input-with-different-currency-patterns-forked-v8f.

Answer 1

使用pattern 属性告诉移动浏览器您喜欢哪种键盘布局可能无法可靠运行。值得庆幸的是，有一个专用属性 inputmode，它应该可以实现您想要的。

Answer 2

$('.money > div').click(function() {
    $('.money > input:eq('+$('.money > div').index(this)+')').focus();
});

$('.numberOnly').on('keydown', function(e) {
    
  if (this.selectionStart || this.selectionStart == 0) {
    // selectionStart won't work in IE < 9
    
    var key = e.which;
    var prevDefault = true;
    
    var thouSep = " ";  // your seperator for thousands
    var deciSep = ",";  // your seperator for decimals
    var deciNumber = 2; // how many numbers after the comma
    
    var thouReg = new RegExp(thouSep,"g");
    var deciReg = new RegExp(deciSep,"g");
    
    function spaceCaretPos(val, cPos) {
        /// get the right caret position without the spaces
        
        if (cPos > 0 && val.substring((cPos-1),cPos) == thouSep)
          cPos = cPos-1;
        
        if (val.substring(0,cPos).indexOf(thouSep) >= 0) {
          cPos = cPos - val.substring(0,cPos).match(thouReg).length;
        }
        
        return cPos;
    }
    
    function spaceFormat(val, pos) {
        /// add spaces for thousands
        
        if (val.indexOf(deciSep) >= 0) {
            var comPos = val.indexOf(deciSep);
            var int = val.substring(0,comPos);
            var dec = val.substring(comPos);
        } else{
            var int = val;
            var dec = "";
        }
        var ret = [val, pos];
        
        if (int.length > 3) {
            
            var newInt = "";
            var spaceIndex = int.length;
            
            while (spaceIndex > 3) {
                spaceIndex = spaceIndex - 3;
                newInt = thouSep+int.substring(spaceIndex,spaceIndex+3)+newInt;
                if (pos > spaceIndex) pos++;
            }
            ret = [int.substring(0,spaceIndex) + newInt + dec, pos];
        }
        return ret;
    }
    
    $(this).on('keyup', function(ev) {
        
        if (ev.which == 8) {
            // reformat the thousands after backspace keyup
            
            var value = this.value;
            var caretPos = this.selectionStart;
            
            caretPos = spaceCaretPos(value, caretPos);
            value = value.replace(thouReg, '');
            
            var newValues = spaceFormat(value, caretPos);
            this.value = newValues[0];
            this.selectionStart = newValues[1];
            this.selectionEnd   = newValues[1];
        }
    });
    
    if ((e.ctrlKey && (key == 65 || key == 67 || key == 86 || key == 88 || key == 89 || key == 90)) ||
       (e.shiftKey && key == 9)) // You don't want to disable your shortcuts!
        prevDefault = false;
    
    if ((key < 37 || key > 40) && key != 8 && key != 9 && prevDefault) {
        e.preventDefault();
        
        if (!e.altKey && !e.shiftKey && !e.ctrlKey) {
        
            var value = this.value;
            if ((key > 95 && key < 106)||(key > 47 && key < 58) ||
              (deciNumber > 0 && (key == 110 || key == 188 || key == 190))) {
                
                var keys = { // reformat the keyCode
          48: 0, 49: 1, 50: 2, 51: 3,  52: 4,  53: 5,  54: 6,  55: 7,  56: 8,  57: 9,
          96: 0, 97: 1, 98: 2, 99: 3, 100: 4, 101: 5, 102: 6, 103: 7, 104: 8, 105: 9,
          110: deciSep, 188: deciSep, 190: deciSep
                };
                
                var caretPos = this.selectionStart;
                var caretEnd = this.selectionEnd;
                
                if (caretPos != caretEnd) // remove selected text
                value = value.substring(0,caretPos) + value.substring(caretEnd);
                
                caretPos = spaceCaretPos(value, caretPos);
                
                value = value.replace(thouReg, '');
                
                var before = value.substring(0,caretPos);
                var after = value.substring(caretPos);
                var newPos = caretPos+1;
                
                if (keys[key] == deciSep && value.indexOf(deciSep) >= 0) {
                    if (before.indexOf(deciSep) >= 0) newPos--;
                    before = before.replace(deciReg, '');
                    after = after.replace(deciReg, '');
                }
                var newValue = before + keys[key] + after;
                
                if (newValue.substring(0,1) == deciSep) {
                    newValue = "0"+newValue;
                    newPos++;
                }
                
                while (newValue.length > 1 && newValue.substring(0,1) == "0" && newValue.substring(1,2) != deciSep) {
                    newValue = newValue.substring(1);
                    newPos--;
                }
                
                if (newValue.indexOf(deciSep) >= 0) {
                    var newLength = newValue.indexOf(deciSep)+deciNumber+1;
                    if (newValue.length > newLength) {
                      newValue = newValue.substring(0,newLength);
                    }
                }
                
                newValues = spaceFormat(newValue, newPos);
                
                this.value = newValues[0];
                this.selectionStart = newValues[1];
                this.selectionEnd   = newValues[1];
            }
        }
    }
    
    $(this).on('blur', function(e) {
        
        if (deciNumber > 0) {
            var value = this.value;
            
            var noDec = "";
            for (var i = 0; i < deciNumber; i++) noDec += "0";
            
            if (value == "0" + deciSep + noDec) {
        this.value = ""; //<-- put your default value here
      } else if(value.length > 0) {
                if (value.indexOf(deciSep) >= 0) {
                    var newLength = value.indexOf(deciSep) + deciNumber + 1;
                    if (value.length < newLength) {
                      while (value.length < newLength) value = value + "0";
                      this.value = value.substring(0,newLength);
                    }
                }
                else this.value = value + deciSep + noDec;
            }
        }
    });
  }
});

$('.price > input:eq(0)').focus();

body{
    margin:50px;
}

.money{
    display:inline-block;
    border:1px solid #ababab;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}

.money > div {
    display:inline-block;
    padding:8px 8px 8px 8px;
    font-size:14px;
    cursor:text;
    color:#666;
/*     pointer-events: none; */
}

.money > input{
    width:200px;
    border:0;
    padding:8px 4px 8px 8px;
    margin:0;
    font-size:14px;
    color:#666;
    cursor:text;
    text-align:left;
    outline:none;
}

.money > input::-ms-clear{
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="money">
    <input type="text" class="numberOnly" autocomplete="off" maxlength="4" /><div>$</div>
</div>
<br><br>
<div class="money">
    <input type="text" class="numberOnly" autocomplete="off" maxlength="6" /><div>$</div>
</div>
<br><br>
<div class="money">
    <input type="text" class="numberOnly" autocomplete="off" maxlength="50" /><div>$</div>
</div>