通过jquery在日期<input>框中自动添加斜杠/符号[重复]答案

【问题标题】：Auto add Slash / symbol in Date <input> box by jquery [duplicate]通过jquery在日期<input>框中自动添加斜杠/符号[重复]
【发布时间】：2017-01-04 03:26:20
【问题描述】：

（我发现了几个问题但没有答案，所以我问了问题）
输入/键入日期时如何在<input> 框中添加自动斜线/符号？
示例：当键入 02 或任何日期、月份、年份数字时，jquery 将在输入框中的 2 数字后自动添加 / 符号，如 02/12/2016
请检查 jsfiddle 示例：https://jsfiddle.net/rjkdd9j6/

HTML：

<input type="text" id="your-id" value="dd/mm/yy">

jquery 或者 JS 有什么简单的解决方案吗？

【问题讨论】：

不是 html 中的标签
@mlegg 有什么解决办法吗？

标签： javascript jquery html regex

【解决方案1】：

这样的事情会奏效。也检查附加的 JSFiddle。

$( document ).ready(function() {
    $('#your-id').bind('keyup','keydown', function(event) {
    var inputLength = event.target.value.length;
    if(inputLength === 2 || inputLength === 5){
      var thisVal = event.target.value;
      thisVal += '/';
      $(event.target).val(thisVal);
    }
  })
});

https://jsfiddle.net/ahmedhawas7/rjkdd9j6/3/

您还可以使用像这样的输入掩码库 Jquery one：https://github.com/RobinHerbots/jquery.inputmask

【讨论】：

很好，但是当输入像 2/12/2016 这样的单一日期时，它会显示像这样的结果 2//12/2016 有什么解决办法吗？
@Aariba 很酷。我也更新了它以防止退格：jsfiddle.net/ahmedhawas7/rjkdd9j6/3
很好，那么请更新答案。
为什么要否决我的问题？
我可以在那里输入14/46/67645789766。我不认为这是预期的。

【解决方案2】：

将 onkeydown 事件处理程序附加到您的 <input> 框，并且每当输入框的长度值为 2 或 5 时附加一个“/”。

小提琴：- https://jsfiddle.net/nuh4dy6j/ `

var input = document.querySelector('input');
input.addEventListener('keydown', ev => {
  var ipLength = ev.target.value.length;
  if(ipLength ===2 || ipLength ===5) {
    ev.target.value += '/';
  }
});

【讨论】：

请提供带有 jquery 的 jsfiddle 示例 :)
jsfiddle.net/nuh4dy6j
这不允许您在 / 之后退格，并且还允许在字符串末尾添加任意数量的字符，而无需插入更多 /s。

【解决方案3】：

你可以这样做，试试看

$(document).ready(function() {
      $("#inputDate").keyup(function(){
            if ($(this).val().length == 2){
                    $(this).val($(this).val() + "/");
            }else if ($(this).val().length == 5){
                  $(this).val($(this).val() + "/");
            }
       });
});

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

【讨论】：

无法正常工作....
它没有工作？？单击运行代码 sn-p 并检查 @Aariba