如何将日期字段中的输入数据限制为仅限于某些字符？

Posted 2021-04-16

我正在创建一个Rails 5应用程序。我有一个咖啡脚本文件，我想在其中创建一个函数，通过键入数据来限制某人输入日期对象。我想要的形式是这样的

12/31/2017

但我希望这个人只能输入数字（并用箭头键移动光标）。我想自动添加斜杠。我尝试创造这个

add_slahes_to_date = (input) ->
  if input.value != input.value.replace(/[^0-9.]/g, '')
    input.value = input.value.replace(/[^0-9.]/g, '')
  v = input.value
  if v.match(/^d{2}$/)
    input.value = v + '/'
  else if v.match(/^d{2}/d{2}$/)
    input.value = v + '/'

但它有几个问题。它会自动添加斜杠，但在下一个条目中它将删除斜杠。此外，当添加斜杠时，我无法点击左箭头返回并在第一个斜杠之前编辑数字。

将日期输入限制为仅数字但是自动添加斜杠的正确方法是什么？如果taht帮助的话，我也在使用jQuery。

答案

这里有两件事......

1. 将字段字符限制为数字
2. 斜杠自动添加

我会添加一个日期验证...因为55/66/9999显然不是一个有效的日期。

所以为了验证日期，我建议使用Moment.js。

我还增加了一年的限制（在这个例子中，1980年到2050年之间）。

然后......用户必须能够纠正错误，因此允许退格键，删除键和左/右箭头。

$('.date')
  .on("keydown",function(e){
  //console.log(e.which);
  
  // Remove error background-color
  $(this).css({"background-color":"initial"});

  // Diallow character that are not a numbers 0 to 9 (both keypads), but allow backspace and left/right arrows
  if( (e.which<48 || e.which>57) && (e.which<96 || e.which>105) && e.which!=8 && e.which!=46 && e.which!=37 && e.which!=39){
    return false;
  }
  
}).on("keyup",function(e){
  if(e.which!=8 && e.which!=46 && e.which!=37 && e.which!=39){
    var value = $(this).val();

    // Auto add slashes
    pattern = /(d{1,2})?(/)?(d{1,2})/g;
    var match = value.match(pattern);
    //console.log(match);

    if( (value.length==2 || value.length==5) && typeof(match)!="null" ){
      $(this).val(match+"/");
    }

    // When all digits are entered
    if( value.length==10 ){


      var date = value.split("/");
      var valid;
      if( (parseInt(date[2])>=1980) && (parseInt(date[2])<=2050) ){

        // Use Moment to validate the date. Will return "invalid date" on impossible dates
        valid = moment(date[2]+"-"+date[0]+"-"+date[1]).format("MM/DD/Y");

      }else{
        valid = "Invalid date";
      }

      // Show error color to user
      if(valid=="Invalid date"){
        $(this).css({"background-color":"red"});
      }else{
        $(this).css({"background-color":"green"}).trigger("blur");
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

<input class="date" placeholder="MM-DD-YYYY"></input>

另一答案

您可以使用正则表达式来检测输入日期的时间，并使用替换函数将值替换为由/分隔的捕获组。

$('#date').on("input",function(){
    $(this).val($(this).val().replace(/[^0-9.]/g, '').replace(/(d{2})/?(d{2})/?(d{4})/,'$1/$2/$3'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="date"></input>

以上是关于如何将日期字段中的输入数据限制为仅限于某些字符？的主要内容，如果未能解决你的问题，请参考以下文章

Oracle Apex：如何将表单中的数字字段限制为仅允许数字？

有没有办法将 iPhone 应用程序限制为仅限某些型号？

将 iOS 中的 UIlabel 文本字段限制为两个字符，输入 3 个或更多时重置

将输入框限制为仅数字 0-9 [重复]

如何将单个字符的 natvis 限制为仅 Visual Studio 中的字符

如何将输入限制为仅接受数字？