Question

我想创建3个输入字段，就像Shopify结帐页面上的输入字段一样。

以下是输入字段的功能：

在信用卡号输入栏中每隔4位数制作一个空格;仅数字字段;将其限制为16个字符
在到期日期字段的2位数字后面创建斜杠;限制为8个字符;仅限数字字段

这个允许用户做两件事：

从2-9写一个数字，然后自动写一个斜杠。

它应该看起来像this.

写入10,11或12，然后自动写入斜杠。

它应该看起来像this.

看看它如何在第二个数字后自动写斜杠？只有当您键入“/”或该月份的第二个数字时才会这样做。

以下是我正在玩的内容：

/*$('#number').on('keypress',function(){
var val = this.value;
var firstVal = val.slice(0,2);    
var secondVal = val.slice(2,6);  
var finalVal = firstVal+"/"+secondVal; 
console.log(finalVal); 
this.value = finalVal; 
}); */

$('#number').on('keypress', function() {
  if (this.value.length >= 2) {
    this.value = this.value.slice(0, 2) + '/' + this.value.slice(3, this.value.length)
  }
});


$(document).ready(function() {
    $("#number").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl/cmd+A
            (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+C
            (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: Ctrl/cmd+X
            (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<input type="text" id="number" maxlength="7" placeholder="MM/YY" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>

但我遇到的问题是你甚至无法输入斜线。

提前致谢，约西亚

如何在任何Shopify结帐页面上创建输入字段？

0 个答案: